jquery mouseenter 单击以删除不起作用的类

Jquery Mouseenter Click to Remove Class Not Working

本文关键字：不起作用 删除 mouseenter 单击 jquery      更新时间：2023-09-26

我真的希望有人能帮忙。我有一个无序列点列表，它在鼠标输入时以不透明度淡出（css 默认为 0.7），在鼠标离开时再次消失。

单击时，我想添加一个使不透明度保持完整的类。到目前为止，但是从匹配的元素中删除类目前不起作用 - 其他使类保持完全不透明的项目也保持完全不透明。

这是Jquery：

    $(document).ready(function () {
        $("#nav a").mouseenter(function () {
            $(this).fadeTo("slow", 1);
            $("#nav a").click(function () {
                $(".activeList").removeClass("activeList"); //THIS PART ISN'T WORKING   
                $(this).addClass("activeList");
            });
        });
        $("#nav a").mouseleave(function () {
            if (!$(this).hasClass("activeList")) {
                $(this).fadeTo("fast", 0.7);
            }
        });
    });

我认为这是因为由于鼠标输入而我被困在元素中并且只能影响（这个）。已经尝试过.bind/.unbind，已经尝试了自己添加/删除类（它有效）和其他一些事情，但到目前为止没有运气！任何建议将不胜感激。

试试这个：

    $(document).ready(function () {
        $("#nav a").mouseenter(function () {
            $(this).fadeTo("slow", 1);
        });
        $("#nav a").click(function () {
            $(".activeList").removeClass("activeList"); //THIS PART ISN'T WORKING   
            $(this).addClass("activeList");
        });
        $("#nav a").mouseleave(function () {
            if (!$(this).hasClass("activeList")) {
                $(this).fadeTo("fast", 0.7);
            }
        });
    });

尝试以下操作（它几乎是相同的代码，但布局不同，进行了一些调整）：

$(document).ready(function () {
    $("#nav a").hover(function(e) { //On hover in
        $(this).fadeTo("slow",1);
    },function(e) { //On hover out
        if(!($(this).hasClass("activeList")))
        {
            $(this).fadeTo("fast",0.7);
        }
    }).click(function(e) { //On click
        $("#nav a").removeClass("activeList");
        $(this).addClass("activeList");
    });
});
意识到

不透明度直到悬停才消失，可能是因为页面不刷新，不知道。已经编辑了我自己的代码以使其工作，但认为我可能会将我的解决方案应用到您的解决方案中，因为您的解决方案更具语义。这是我得到的：

    $(document).ready(function () {
    $("#nav a").mouseenter(function () {
    if (!$(this).hasClass("activeList")) // Added IF here, only had it on 
                                         // mouseleave originally
        {
        $(this).stop().fadeTo("slow", 1);
        }
          $("#nav a").click(function () {
          $(".activeList").stop().removeClass("activeList"); 
          $(this).stop().stop().addClass("activeList");
          $("#nav a").stop().not(".activeList").fadeTo("fast",0.7);
   //The class came off, but the opacity didn't fade because no page refresh..?
   //Added extra animation eliminating selected with .not to fix
        });
        });
            //THE REST IS SUPERFLUOUS
        $("#nav a").mouseleave(function () {
        if (!$(this).hasClass("activeList")) 
             {
           $(this).stop().fadeTo("fast", 0.7);
             }
    });
});

也不得不在我的中添加一些 .stop 部分，因为多次悬停不好。现在将停止发布，也许只是在您的评论上弹出一条评论，说我是否设法将我的答案集成到您更整洁的代码中。

非常感谢大家的发布，我真的很感激！

我发现不透明度是通过添加到元素的 style 属性来添加的，因此删除类无济于事，请尝试像这样清除样式：

    $("#nav a").click(function () {
        $(".activeList").attr("style", "");
        $(".activeList").removeClass("activeList");
        $(this).addClass("activeList");
    });
相关文章：