Javascript 第一次单击执行第一个功能时，其他单击执行其他功能

我有一个功能，可以在点击时切换图像src，但我需要确保它们不能连续多次点击同一张照片，这样1张图像就不会丢失。还有一些其他的事情需要在未来发生

现在的问题是，我正在尽我最大的努力让这一切发生，但仍然无法解决。如果

这是我的代码：

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

---

您需要将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);
    }
});

---

不要使用条件检查，而是使用更干净的方法

---

不要使用条件检查，而是使用更干净的方法

---

附加事件时将计算if语句。您需要在触发事件时对其进行评估

我认为这可能有效：

var countSwitch = 0;
$('.display-img').click(function(){
    if(countSwitch == 0){
        countSwitch++;
        // handle first click
    } else {
        // handle further clicks
    }
});

---

附加事件时将计算if语句。您需要在触发事件时对其进行评估

我认为这可能有效：

var countSwitch = 0;
$('.display-img').click(function(){
    if(countSwitch == 0){
        countSwitch++;
        // handle first click
    } else {
        // handle further clicks
    }
});

---

正如Arun所说，您需要检查click处理程序中的条件。在编写函数时，第二个处理程序永远不会初始化。我简化了您的代码，并举例说明了一种方法：

var countSwitch = 0;

$('.click-handler').click(function(){

  if(countSwitch === 0) {
    firstFunction();
  } else {
    secondFunction();
  }

  countSwitch++;

});


function firstFunction() {  
  console.log('First count', countSwitch);
}

function secondFunction() {
  console.log('Second count', countSwitch);
}

---

正如Arun所说，您需要检查click处理程序中的条件。在编写函数时，第二个处理程序永远不会初始化。我简化了您的代码，并举例说明了一种方法：

var countSwitch = 0;

$('.click-handler').click(function(){

  if(countSwitch === 0) {
    firstFunction();
  } else {
    secondFunction();
  }

  countSwitch++;

});


function firstFunction() {  
  console.log('First count', countSwitch);
}

function secondFunction() {
  console.log('Second count', countSwitch);
}

---

您的实现运行一次，将（countSwitch==0）计算为true，然后添加一个（第一个）将始终执行的事件处理程序

根据您试图实现的具体行为，您可以：

按照gurvinder372的建议并使用.one（）和.bind（），如果您的第一个函数每个映像只运行一次

使用OscarJ的实现，它添加了一个.click（）事件处理程序，并使用countSwitch的值来确定要执行的代码。我相信这就是你想要实现的

最后，由于您提到不希望丢失数据，您还可以使用HTML5的数据属性来存储初始图像路径。如果每个图像需要更改为不同的图像，也可以将新图像的路径存储在此处。属性将始终保持不变，因此在操作元素时不会丢失任何东西

---

对于HTML5数据属性，我建议阅读。jQuery还使用这些属性来获取它们的值。

您的实现运行一次，将（countSwitch==0）计算为true，然后添加一个（第一个）将始终执行的事件处理程序

根据您试图实现的具体行为，您可以：

按照gurvinder372的建议并使用.one（）和.bind（），如果您的第一个函数每个映像只运行一次

使用OscarJ的实现，它添加了一个.click（）事件处理程序，并使用countSwitch的值来确定要执行的代码。我相信这就是你想要实现的

最后，由于您提到不希望丢失数据，您还可以使用HTML5的数据属性来存储初始图像路径。如果每个图像需要更改为不同的图像，也可以将新图像的路径存储在此处。属性将始终保持不变，因此在操作元素时不会丢失任何东西

---

对于HTML5数据属性，我建议阅读。jQuery还使用这些属性来获取它们的值。

您需要检查单击手柄中的条件它应该大于symbol而不是小于symbol。@ArunPJohny谢谢这是修复方法！如果您想让我确认您的答案，请将其作为一个帖子发布：-D@J.Dekkers你能分享你的html样本吗。。看起来脚本可以简化一点。这两个调用之间的区别是什么？您需要检查单击手柄中的条件它应该大于symbol而不是小于symbol。@ArunPJohny谢谢这是修复方法！如果您想让我确认您的答案，请将其作为一个帖子发布：-D@J.Dekkers你能分享你的html样本吗。。看起来脚本可以简化一点。另外，这两个调用之间的区别可能是第一次单击会删除事件并添加下一个事件，但这比仅单击if更难+1这是行不通的，因为在检查该值是否等于0之前，请将countSwitch调到1，否则该值永远不会等于0。另一种方法可能是，第一次单击会删除该事件并添加下一个事件，但这比仅单击if更难+1这是行不通的，因为在检查该值是否等于0之前，请先将countSwitch调到1，否则该值永远不会等于0。