Jquery 2单击“函数”未按预期工作

I am trying to hide and show my footer navbar but i wanted to change the chevron icon , when the navbar is hidden chevron up to be displayed and when navbar shown chevron down show therefore i tried removing a class .bottom-action and add one class .bottom-action2 and when the 2nd one is clicked inverse all settings but it is not working as expected.

我试图隐藏并显示我的页脚导航栏,但我想更改雪佛龙图标,当导航栏隐藏雪佛龙时显示,当导航栏显示雪佛龙显示因此我尝试删除类.bottom-action并添加一个类.bottom-action2,当点击第二个时,反转所有设置,但它没有按预期工作。

$(document).ready(function(){
    $(".bottom-action").click(function(){
        $(".bottom-navbar").slideToggle("slow");
       $(".down").css("display","none");
       $(".up").css("display","block");
       $(".bottom-action").removeClass('bottom-action').addClass("bottom-action2");
         
    });

$(".bottom-action2").click(function(){
        $(".bottom-navbar").slideToggle("slow");
       $(".up").css("display","none");
       $(".down").css("display","block");
       $(".bottom-action2").removeClass('bottom-action2').addClass("bottom-action");
         
    });



});

.bottom-navbar{
  position: fixed;
width: 100%;
bottom: 0px;
left: 0px;
background: #E4E4E4;
padding-top: 3px;
border-top: 1px solid #C9C9C9;
z-index: 7000;
}

.bottom-navbar .item{

  margin-left: 22px;
margin-right: 22px;
display: inline-block;
border-bottom: 2px solid transparent;
cursor: pointer;
}

.bottom-action{position: fixed;
bottom: 0px;
right: 10%;
background-color: #EEE;
color: #000;
z-index: 7002;
background: transparent;

}

.bottom-action2{position: fixed;
bottom: 0px;
right: 10%;
background-color: #EEE;
color: #000;
z-index: 7002;
background: transparent;

}

.bottom-action .down{}
.bottom-action .up{display: none;}

<head>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<div class="bottom-navbar">
    <div class='container'><div class='item'>Compare</div></div>
</div>

<div class='bottom-action'><span class='glyphicon glyphicon-chevron-down down'></span> <span class='glyphicon glyphicon-chevron-up up'></span></div>

2 个解决方案

#1

Try :

$(document).on('click', '#myButton', function(e){
    //jour code
});

Instead of :

代替 :

$('myButton').click(...)

#2

The problem is that at the time of binding the event there is no bottom-action2 element in your DOM. Funnily enough, this would work:

问题是在绑定事件时,DOM中没有bottom-action2元素。有趣的是,这可行:

$(".bottom-action").click(function(){
  if($(this).hasClass("bottom-action")){
      // do one thing
  }
  else if if($(this).hasClass("bottom-action2")){
     // do the other thing
  }
}

But as @Béranger pointed out, using a handler on a higher level would be the cleaner solution. In your case something like

但正如@Béranger指出的那样,在更高层次上使用处理程序将是更清晰的解决方案。在你的情况下像

$(document).on('click', '.bottom-action', function(e){
   // do one thing
});

$(document).on('click', '.bottom-action2', function(e){
   // do the other thing
});

#1