<ul> <li class="red"><a href="javascript:void(0)">项目一</a></li> <li class="green"><a href="javascript:void(0)">项目二</a></li> <li class="green"><a href="javascript:void(0)">项目三</a></li> <li class="green"><a href="javascript:void(0)">项目四</a></li> </ul> $(function () { $.each($("li"), function (i, o) { $(this).children("a").click(function () { allhide(); $(this).parent("li").attr("class", "red"); }); if ($(this).attr("class") != "red") { $(this).mouseenter(function () { $(this).attr("class", "red"); }); $(this).mouseleave(function () { $(this).attr("class", "green"); }); } }); }); function allhide() { $.each($("li"), function (i, o) { $(this).attr("class", "green"); }); } <style type="text/css"> li { width: 80px; list-style-type: none; } .red { background-color: Red; } .green { background-color: Green; } </style>
$.each($("li"), function (i, o) { $(this).children("a").click(function (e) { $("li").attr("class", "green");//不用另起函数 $(this).parent("li").attr("class", "red"); e.stopPropagation(); }); if ($(this).attr("class") != "red") { $(this).mouseenter(function (e) { $(this).attr("class", "red"); e.stopPropagation(); }); $(this).mouseleave(function (e) { $(this).attr("class", "green"); e.stopPropagation(); }); } });
好像不起作用,還是滑鼠點擊時改變這個li的樣式,但是滑鼠移開時就去掉了這個樣式了,不知道是什麼原因
<script type="text/javascript"> //这里不存在冒泡呀 $(function () { $("li").each(function(){ $(this).find("a").click(function(){ $("li").attr("class","green"); $(this).parent().attr("class","red"); }) }); }); </script>
哦,不是冒泡嗎? ?那我這裡的點擊後移開滑鼠樣式就改變了啊
$(this).children("a").click(function () { allhide(); $(this).parent("li").attr("class", "red"); });
感覺是程式碼的問題,你的$(this)指標變過了下面還能用嗎?
你用變數記錄var that = $(this)試試看
if ($(this).attr("class") != "red") { $(this).mouseenter(function () { $(this).attr("class", "red"); }); $(this).mouseleave(function () { $(this).attr("class", "green"); }); } });
恩,我自己也搞懂了,滑鼠點擊事件時,顏色為紅色的樣式已經改變了,而我沒有把變化的指標保存下來,以下是我修改過的程式碼:
nodeli = $("ul li:first"); $.each($("li"), function (i, o) { $(this).click(function () { allhide(); $(this).attr("class", "red"); nodeli = $(this); //alert(nodeli.html()); }); $(this).mouseover(function () { $(this).attr("class", "red"); }); $(this).mouseout(function () { $(this).attr("class", "green"); $(nodeli).attr("class", "red"); // alert(nodeli.html()); }); });
以上是jquery阻止click與mouseover以及mouseout冒泡問題解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!