使用jQuery的$(this)子选择器出现了某种未知的问题,导致它无法正常工作。
使用jQuery的$(this)子选择器出现了某种未知的问题,导致它无法正常工作。
我试图在鼠标悬停在父元素上时显示/隐藏子元素。我有多个类集,类似于Jquery $(this) Child Selector。
由于某种未知的原因,它不起作用。
我目前的代码是:
另外,
$("div.childitem").css({visibility: "hidden"}); $("div.parentitem").mouseenter(function(){ $("div.childitem").css({visibility: "visible"}); }); $("div.parentitem").mouseleave(function(){ $("div.childitem").css({visibility: "hidden"}); });
这段代码可以工作,但是所有的子元素都会受到影响。我想要的是只影响特定的div和它的子元素。
我尝试过使用:
$(this).children("div.childitem").css({visibility: "visible"}); $(this).parent().children("div.childitem").css({visibility: "visible"}); $(this).next("div.childitem").css({visibility: "visible"});
由于某种原因,这些都不起作用。
有人可以告诉我错在哪里吗?
谢谢
Deepak
问题出现的原因是使用了$(this).children("div.childitem")选择器,该选择器只能找到直接子元素,而不能找到子元素的子元素。解决方法是使用$(this).find("div.childitem")选择器,该选择器可以找到所有子元素,包括子元素的子元素。
如果仍然无法解决问题,建议分析所有相关事件处理程序被调用的顺序。可能是鼠标进入事件处理程序的结果被其他事件处理程序立即撤销了。
在Chrome浏览器或使用Firebug插件的Firefox浏览器中,可以将日志输出到控制台。例如,对于Chrome浏览器,使用console.log(text_or_object)。
尝试调试事件处理程序,即尝试理解它们被调用的顺序以及它们对页面的实际操作。