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

我正在从页面左侧弹出一个侧栏。切换边栏的元素是Bootstrap导航栏上的导航栏品牌按钮。我在<a>标记内部有一个<i>作为图标，并将这两个包围为<div>作为点击区域。它看起来像这样：jQuery - 类之间切换每次点击？

<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>别处另一个图标在页面上。我发现的是，我的脚本也在改变这个图标的类，当它只应该切换我的切换元素上的图标。我怎样才能重写这个脚本来影响我的切换元素上的类，而不是我的页面上的其他<i>图标？预先感谢您的帮助。

来源

2017-02-24 KeplerIO

检查'toggleClass'功能 –

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

来源

2017-02-24 23:07:35

现在尝试这个。我只是认为.find（）只寻找下降的孩子，所以我很困惑，为什么它找到所有“我”编辑：这工作喜欢魅力。它与我所拥有的没有什么不同，所以我不明白。但非常感谢你！ – KeplerIO

我的代码应该基于我正在寻找具有特定类的“我”的事实。为什么会找到没有这个班的其他人呢？ – KeplerIO

感谢图莎尔阿罗拉该修正后的脚本

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

来源

2017-02-25 00:23:33 KeplerIO

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

回答

相关问题