jQuery - 每次点击在类之间切换?

时间:2017-02-24 22:59:44

标签: javascript jquery css jquery-ui

我正在使用从页面左侧弹出的侧边栏。切换侧边栏的元素是Bootstrap导航栏上的导航栏品牌按钮。我在<i>标记内部有<a>作为图标,并将这两个被<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>图标。我发现我的脚本也在改变这个图标上的类,当它只应该切换我的切换元素上的图标时。如何重新编写此脚本以仅影响切换元素上的类而不影响页面上的其他<i>图标?在此先感谢您的帮助。

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

感谢Tushar Arora为此更正的剧本

int count=0;
int matchCount = 0;
System.out.println("Try\tDice 1\tDice 2\tDice 3");
do{
        System.out.println();
        count++;
        dice1=g.nextInt(6)+1;
        dice2=g.nextInt(6)+1;
        dice3=g.nextInt(6)+1;
        System.out.print(count+"\t");

        if(dice1==dice2 && dice2==dice3){
        same=true;
        matchCount++;
        System.out.println("It took"+count+"times and they all landed on number "+dice1);
       }
   }
   while(matchCount < 3);