<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();
});
}
});Es scheint nicht zu funktionieren, wenn die Maus angeklickt wird, aber der Stil wird entfernt, wenn die Maus wegbewegt wird
<script type="text/javascript">
//这里不存在冒泡呀
$(function () {
$("li").each(function(){
$(this).find("a").click(function(){
$("li").attr("class","green");
$(this).parent().attr("class","red");
})
});
});
</script>Oh, sprudelt es nicht? ? Wenn ich dann hier klicke und die Maus bewege, ändert sich der Stil
$(this).children("a").click(function () {
allhide();
$(this).parent("li").attr("class", "red");
}); Es fühlt sich an, als wäre es ein Codeproblem. Kann es noch verwendet werden, nachdem Ihr $(this)-Zeiger geändert wurde?
Verwenden Sie eine Variable, um var that = $(this) aufzuzeichnen, und versuchen Sie es
if ($(this).attr("class") != "red") {
$(this).mouseenter(function () {
$(this).attr("class", "red");
});
$(this).mouseleave(function () {
$(this).attr("class", "green");
});
}
});Nun, ich habe es selbst herausgefunden, wenn die Maus auf das -Ereignis klickt ist rot. Der Stil hat sich geändert, aber ich habe den geänderten Zeiger nicht gespeichert. Das Folgende ist mein geänderter Code:
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());
});
});Das obige ist der detaillierte Inhalt vonjquery verhindert, dass Klick-, Mouseover- und Mouseout-Bubbling-Probleme gelöst werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
