第一次点击做第一个功能，其他点击做其他功能

我有一个功能，在点击时切换图像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); 

    }); 
}

来源

2016-02-29 J.Dekkers

您需要检查点击处理程序中的条件 –

它应该大于符号而不是小于符号。 –

@ArunPJohny谢谢你的修复！如果你想让我确认你的答案，请将它作为一个发布:-D –

你需要把你的countSwitch变量，如果点击事件中的语句：使用条件

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

来源

2016-02-29 09:54:32 jcubic

另一种方式可能是第一次点击删除事件并添加下一个事件，但它比仅仅是如果更难。 +1 – Salketer

这将无法正常工作，因为在检查值是否等于0之前，您将countSwitch设置为1，而这绝不会是。 –

@AshwinvanDijk你的权利，谢谢你指出。 – jcubic

而不是检查，使用更清洁的方法使用one

$('.display-img').one("click", function(){ 

    //first function call 

    //now bind the second click handler 
    $('.display-img').bind("click", function(){ 
     //second function call 
    }); 

});

来源

2016-02-29 09:55:33 gurvinder372

您在附加事件时评估您的if语句。您需要让他们在事件触发时进行评估。

我想这可能工作：

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

来源

2016-02-29 09:58:22 OscarJ

正如阿伦所说，你需要检查的点击处理程序中的条件。在编写函数时，第二个处理程序永远不会被初始化。我简化了你的代码，而制成的一种方式，你可以做一个这样的例子：

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

http://jsbin.com/tuponisado/edit?js,console,output

来源

2016-02-29 10:01:19

你实现运行一次，评估（countSwitch == 0）是真的，然后添加一个（第一）将始终执行的事件处理程序。

根据您想达到的具体行为，您可以：

按照gurvinder372的建议和使用。一（）和.bind（），如果你的第一个函数应该只运行一次每图片。
使用OscarJ的实现，它添加了一个.click（）事件处理程序并使用countSwitch的值来确定要执行的代码。我相信这是你想要达到的目标。
最后，由于您提到不想丢失数据，您还可以使用HTML5的数据属性来存储您的初始图像路径。如果每个图像需要更改为不同的图像，则还可以在此处存储新图像的路径。属性将始终保持不变，因此在操纵元素时不会冒险失去任何东西。

对于HTML5数据属性，我推荐阅读MDN's guide。 jQuery的.data()也使用这些属性来获得它们的价值。

来源

2016-02-29 10:07:43

第一次点击做第一个功能，其他点击做其他功能

回答

相关问题