我遇到了 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();
});
最佳答案
乍一看,您的代码中似乎只需要一个 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();
});
这样,每次点击时只会触发一段代码。截至目前,如果它没有您运行添加该类的代码的第一部分的类。代码的下一部分将始终触发,因为您已经添加了该类。
关于javascript - jquery if语句和.each,if语句意外运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30985219/