Question

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

现在的问题是我正在尽我所能来实现这一目标，但仍然无法弄明白。不知怎的，它停留在第一个Package SDL_image was not found in the pkg-config search path.

这是我的代码：

if

Answer 1

你需要在click事件中放置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);
    }
});

Answer 2

使用one

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

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

  //first function call

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

} );

Answer 3

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

根据您尝试实现的确切行为，您可以：

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

对于HTML5数据属性，我建议您阅读MDN's guide。 jQuery＆＃39; s .data()也使用这些属性来获取它们的价值。

Answer 4

附加活动时会评估您的if语句。您需要在触发事件时对它们进行评估。

我认为这可行：

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

Answer 5

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

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

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

5 个答案: