Question

首次实现代码（某些元素通过单击消失，然后再出现一次单击+ toggleClass）。第二次只有toggleClass工作。为什么？

   $('.avatar').click(function() {

            $('.avatar').toggleClass("hey");
            $(".changebutton").hide();
                $(".myButton").hide();

                $('.avatar').click(function() {

                $('.avatar').toggleClass("heyback");
            $(".changebutton").show();
                $(".myButton").show();


      });
     });

Answer 1

你采取了错误的做法。每次单击该头像时，您的代码都会分配一个新的单击侦听器。考虑这样的事情：

＆＃13;

$('.avatar').click(function() {

  $('.avatar').toggleClass("hey");
  if ($(".changebutton").is(':visible')){
    $(".changebutton").hide();
    $(".myButton").hide();
  }
  else {
    //$('.avatar').toggleClass("heyback"); // not sure if this was intended
    $(".changebutton").show();
    $(".myButton").show();
  };
});

＆＃13;

.hey {
  color: blue;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='avatar'>AVATAR</div>
<div class='changebutton'>changebutton</div>
<div class='myButton'>myButton</div>

＆＃13;

有很多方法可以优化/扩展它（比如使用旗帜，或者只是像在adeneo的评论中那样切换等），但不知道更多，只要确保你不创造听众在监听器回调函数中。

第二次没有实现jQuery代码

1 个答案: