Question

我正在尝试在元素的悬停事件上切换一个类。我的代码是

        var el = $('[model-id="' + node.id + '"]');

        el.hover(
            function() {
                $(this).toggleClass( "myClass" );
                console.log("in",this.getAttribute("class"))
            },

            function() {
                $(this).toggleClass( "myClass" );
                console.log("out",this.getAttribute("class"))
            }
        )

我打开了chrome工具元素标签，我正在看dom。

当我将鼠标悬停在元素上时，我收到消息

in element Node basic

当我离开元素时，我得到了

out element Node basic

所以你可以看到“in”事件，我得到一个合适的元素，并添加“myClass”类。然而，这并没有出现在dom检查员身上。

我错过了什么？它必须是明显的东西;）

Answer 1

您的代码很好..您可以使用hasClass查看该元素是否具有该类。请参阅 fiddle 。

el.hover(
    function() {
        $(this).toggleClass( "myClass" );
        console.log("in",$(this).hasClass("myClass"))
    },

    function() {
        $(this).toggleClass( "myClass" );
        console.log("out",$(this).hasClass("myClass"))
    }
)

如果你真的想要上课而不只是测试它是否被添加。然后，您可以使用$(this).attr("class")。

Answer 2

所以事实证明我试图添加一个类的元素是在svg标记内。根据{{3}}，这不会起作用。

答案是使用jQuery3或使用classList对象

this.classList.add('myClass');

确实改变了DOM

希望这有助于其他人寻找解决奇怪问题的方法！

toggleClass不会切换类

2 个答案: