[英]jQuery .hide() only working half the time
这对某些人来说可能看起来非常明显,但我真的无法弄清楚为什么这样的事情会发生,所以我正在寻找任何可能的帮助!
我有扩展的行,每个行都应该展开以在单击时显示其详细信息,或者按下下一个按钮时。 它们在单击时显示和隐藏正确,但是当按下下一个按钮时,我无法使其工作。
这是.js部分:
var main = function() {
var curQuantity1 = 0;
var curQuantity2 = 0;
var curQuantity3 = 0;
$('.article').click( function() {
$('.description').hide();
$('.article').removeClass('current');
$(this).children('.description').show();
$(this).addClass('current');
});
$(".next1").click( function() {
if (curQuantity1 + curQuantity2 + curQuantity3 == 3){
console.log("Next clicked");
var currentArticle = $('.current');
var nextArticle = currentArticle.next();
currentArticle.removeClass('current');
nextArticle.addClass('current');
$('.description').hide();
$('.current').children('.description').show();
} else {
alert("총 3통을 골라주세요");
}
});
...//code here takes care of updating curQuantity so they can add upto 3
};
$(document).ready(main);
我认为在这里粘贴HTML代码可能会使它太长,但如果需要,它会这样做。
我模糊地猜测孩子可能不被允许修改它的父类,但我无法找到解决方法。
预先感谢您的任何帮助! 我整天都难过了:(
由于.next1
位于.article
,当您单击“下一步”按钮时,由于事件冒泡,单击也将发送到包含它的文章。 所以首先.next1
点击处理程序显示下一个项目,然后.article
点击显示旧文章。 解决方案是使用event.stopPropagation()
来阻止事件冒泡:
$(".next1").click( function(e) {
e.stopPropagation();
if (curQuantity1 + curQuantity2 + curQuantity3 == 3){
console.log("Next clicked");
var currentArticle = $('.current');
var nextArticle = currentArticle.next();
currentArticle.removeClass('current');
nextArticle.addClass('current');
$('.description').hide();
$('.current').children('.description').show();
} else {
alert("총 3통을 골라주세요");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.