我具有一个可在单击时切换图像src的功能,但是,我需要确保它们不能连续多次单击同一张照片,以使图像1不会丢失。再加上将来还需要发生一些其他事情。

现在的问题是我正在尽力做到这一点,但仍然无法解决。它以某种方式停留在第一个if

这是我的代码:

var countSwitch = 0;
if(countSwitch == 0){
    $('.display-img').click(function(){
        countSwitch++;

        selectImg = $(this).find('img').attr('src');
        $(this).addClass('last-clicked');

        currentImg = $('.prime-img img').attr('src');

        $(this).find('img').attr('src', currentImg);

        $('.prime-img img').fadeOut(400, function() {
            $('.prime-img img').attr('src', selectImg);
        }).fadeIn(400);
        console.log('eerste count', countSwitch);
        console.log('eerste');
    });
}
if(countSwitch >= 0){
    $('.display-img').click(function(){
        $('figure').removeClass('last-clicked');
        $(this).addClass('last-clicked');

        selectImg = $(this).find('img').attr('src');
        currentImg = $('.prime-img img').attr('src');

        $(this).find('img').attr('src', currentImg);

        $('.prime-img img').fadeOut(400, function() {
            $('.prime-img img').attr('src', selectImg);
        }).fadeIn(400);
        console.log('2e');
        console.log('2e count', countSwitch);

    });
}

最佳答案

您需要将countSwitch变量if语句放入click事件中:

var countSwitch = 0;

$('.display-img').click(function(){

    if(countSwitch == 0) {
        countSwitch++;
        selectImg = $(this).find('img').attr('src');
        $(this).addClass('last-clicked');

        currentImg = $('.prime-img img').attr('src');

        $(this).find('img').attr('src', currentImg);

        $('.prime-img img').fadeOut(400, function() {
            $('.prime-img img').attr('src', selectImg);
        }).fadeIn(400);
        console.log('eerste count', countSwitch);
        console.log('eerste');
    } else {
        $('figure').removeClass('last-clicked');
        $(this).addClass('last-clicked');

        selectImg = $(this).find('img').attr('src');
        currentImg = $('.prime-img img').attr('src');

        $(this).find('img').attr('src', currentImg);

        $('.prime-img img').fadeOut(400, function() {
            $('.prime-img img').attr('src', selectImg);
        }).fadeIn(400);
        console.log('2e');
        console.log('2e count', countSwitch);
    }
});

关于javascript - 第一次单击时执行第一个功能,其他单击时执行其他功能,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35696414/

10-12 12:28
查看更多