jQuery - 每次点击在类之间切换？答案

【问题标题】：jQuery - Switch Between Classes Every Click?jQuery - 每次点击在类之间切换？
【发布时间】：2023-04-03 15:10:02
【问题描述】：

我正在制作一个从页面左侧弹出的侧边栏。切换侧边栏的元素是 Bootstrap 导航栏上的 navbar-brand 按钮。我在<a> 标签内有一个<i> 作为图标，并让这两个被<div> 包围作为点击区域。它看起来像这样：

<div id = "sheath-toggle" class = "sheath-toggle-icon">
    <a class="navbar-brand" href = "#"><i class = "glyphicon glyphicon-menu-hamburger"></i></a>
</div>

侧边栏不显示时，图标为汉堡图标。当侧边栏弹出时，图标变为左箭头，关闭时又变回汉堡包。

原来，这是我用来改变图标的jQuery。

$(".sheath-toggle-icon").click(function() {
    if ( $(this).find("i").hasClass("glyphicon-menu-hamburger") ) {
        $("i").switchClass("glyphicon-menu-hamburger", "glyphicon-menu-left");
    } else if ( $(this).find("i").hasClass("glyphicon-menu-left") ) {
        $("i").switchClass("glyphicon-menu-left", "glyphicon-menu-hamburger");
    }
})

这对我来说效果很好，直到我决定在页面上的另一个<i>elsewhere 另一个图标。我发现我的脚本也改变了这个图标上的类，而它应该只在我的切换元素上切换图标。如何重新编写此脚本以仅影响我的切换元素上的类而不影响我页面上的其他 <i> 图标？提前感谢您的帮助。

【问题讨论】：

检查toggleClass函数

标签： javascript jquery css jquery-ui

【解决方案1】：

$("i") selects all the icons on your page.

你需要像这样重写你的代码 -

$(".sheath-toggle-icon").click(function() {
    var icon = $(this).find("i");
    if (icon.hasClass("glyphicon-menu-hamburger") ) {
        icon.switchClass("glyphicon-menu-hamburger", "glyphicon-menu-left");
    } else if ( icon.hasClass("glyphicon-menu-left") ) {
        icon.switchClass("glyphicon-menu-left", "glyphicon-menu-hamburger");
    }
})

【讨论】：

现在试试这个。我只是认为 .find() 只寻找下降的孩子，所以我很困惑为什么它会找到所有“i” 编辑：这很有效。它甚至与我所拥有的没有什么不同，所以我不明白。不过非常感谢！
我的代码应该可以工作，因为我正在寻找具有特定类的“i”。为什么它会找到没有那个类的其他人？

【解决方案2】：

感谢 Tushar Arora 提供了这个更正的脚本

$(".sheath-toggle-icon").click(function() {
    var icon = $(this).find("i");
    if (icon.hasClass("glyphicon-menu-hamburger") ) {
        icon.switchClass("glyphicon-menu-hamburger", "glyphicon-menu-left");
    } else if ( icon.hasClass("glyphicon-menu-left") ) {
        icon.switchClass("glyphicon-menu-left", "glyphicon-menu-hamburger");
    }
})

【讨论】：