javascript - 第一次点击执行第一个功能，其他点击执行其他功能

Question

我有一个在单击时切换图像源的功能，但是，我需要确保他们不能连续多次单击同一张照片，这样第一张图像就不会丢失。另外， future 还需要发生一些其他事情。

现在的问题是我正在尽力实现这一点，但仍然无法弄清楚。不知怎的，它停留在第一个 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);

    });
}

Answer 1

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

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);
    }
});