javascript - jquery if语句和.each，if语句意外运行

Question

我遇到了 if 语句意外触发的问题。我正在点击创建两个图像之间的过渡。过渡结束后，我将一个类添加到正文中，以便一些内容出现和消失。我想通过向主体添加一个类来反转过渡，然后将图像移回原位。

但是，当我运行以下代码时(我省略了定义偏移量的代码)。第一个转换工作正常——在第一个 if 语句中运行代码，然后将类“expand”添加到主体中。但是在下一次点击过渡回来时，“expand”类从主体中删除，运行图像上的过渡，但随后将“expand”添加回主体(第一个 if 语句在过渡发生后运行).

我如何防止初始 if 语句在第二次点击/转换时执行，并将“展开”添加回正文？

感谢您的帮助!

$('.picture-item').click(function(){

if (!$('body').hasClass('expand')) {
  var length = $('.match').length;

  $('.match').each(function(i) {
    // get the data value for the equivalent pictures 
    var pictureMatch = $(this).data('image');

    $(this).find('.picture-item-background').css({ '-webkit-transform':'translate('+offsetLeft+'px, '+offsetTop+'px) scale('+offsetScale+')'});
    if(length == i+1){
      $('.match').find('.picture-item-background').on('transitionend webkitTransitionEnd oTransitionEnd', function () {
          $('body').addClass('expand');
      });
    } 
    i++;

  });  
}

if ($('body').hasClass('expand')) {        
  $('body').removeClass('expand');
  $('#minimized').on('transitionend webkitTransitionEnd oTransitionEnd', function () {
    $('.picture-item-background').css({'-webkit-transform':'translate(0px,0px) scale(1)'});
  });
}

return false;
event.stopPropagation();  

});

Answer 1

乍一看，您的代码中似乎只需要一个 else:

$('.picture-item').click(function(){

  if (!$('body').hasClass('expand')) {
    // your code 
  } else {   // get rid of if ($('body').hasClass('expand')) {        
   // the rest of your code
  }
  return false;
  event.stopPropagation();  
});

这样，每次点击时只会触发一段代码。截至目前，如果它没有您运行添加该类的代码的第一部分的类。代码的下一部分将始终触发，因为您已经添加了该类。