jquery empêche la résolution des problèmes de clic, de survol et de sortie de souris

<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();
                });
            }
        });

Cela ne semble pas fonctionner. Le style de ce li est modifié lorsque l'on clique sur la souris, mais le style est supprimé lorsque la souris est éloignée je ne sais pas pourquoi

<script type="text/javascript">
    //这里不存在冒泡呀
    $(function () {
        $("li").each(function(){
            $(this).find("a").click(function(){
                $("li").attr("class","green");
                $(this).parent().attr("class","red");
            })
        });
    });
</script>

Oh, ça ne bouillonne pas ? ? Ensuite, lorsque je clique et déplace la souris ici, le style change

$(this).children("a").click(function () {
                    allhide();
                    $(this).parent("li").attr("class", "red");
                });

J'ai l'impression que c'est un problème de code. Peut-il toujours être utilisé après que votre pointeur $(this) ait été modifié ?

Utilisez une variable pour enregistrer var that = $(this) et essayez

 if ($(this).attr("class") != "red") {
                    $(this).mouseenter(function () {
                        $(this).attr("class", "red");
                    });
                    $(this).mouseleave(function () {
                        $(this).attr("class", "green");
                    });
                }
            });

Eh bien, je l'ai compris moi-même Lorsque la souris clique sur l'événement

, la couleur. est rouge. Le style a changé, mais je n'ai pas enregistré le pointeur modifié. Voici mon code modifié :

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!