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>
图标?预先感谢您的帮助。
答
$("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");
}
})
答
感谢图莎尔阿罗拉该修正后的脚本
$(".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");
}
})
检查'toggleClass'功能 –