Question

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

但是，当我运行以下代码时（我省略了定义偏移量的代码）。第一个转换工作正常 - 在第一个if语句中运行代码，然后将类'expand'添加到正文。但是在下一次单击转换回来时，类'expand'将从正文中删除，图像上的转换将被运行，但随后'expand'被添加回正文（第一个if语句在转换发生后运行））。

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

感谢您的帮助！

$('.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();  
});

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

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

1 个答案: