Question

我一直试图编写一个显示或隐藏点击内容的功能，而且我目前只是根据点击按钮的次数而停留在显示/隐藏状态。我的代码：

＆＃13;

 $(document).ready(function(){
              $("#twitch-pasek-przycisk").click(function(){
                           var e=0;
                           e=e+1;
                           if(e%2==0)
                                 {
                                    $("#twitch-pasek").animate({left: '-150px'});
                                  }
                            $("#twitch-pasek").animate({left: '150px'});
                            var i=document.getElementById('licznik');
                             i.innerHTML = e;
                            });
                        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Here's jsfiddle I created showing my problem. 尽管每次单击添加1，变量e的显示值仍为1。我应该如何构建它以使其工作？或者像perggle一样有一些技巧，比如toggle（）函数，但是对于动画来说？

Answer 1

在click事件之外声明e变量，否则每次点击都会覆盖它，它将始终返回1。请参阅下面的工作代码：

＆＃13;

 $(document).ready(function() {
   var e = 0;
   $("#twitch-pasek-przycisk").click(function() {   
     e = e + 1;
     if (e % 2 == 0) {
       $("#twitch-pasek").animate({
         left: '-150px'
       });
     }
     $("#twitch-pasek").animate({
       left: '150px'
     });
     var i = document.getElementById('licznik');
     i.innerHTML = e;
   });
 });

＆＃13;

#twitch-pasek {
  position: relative;
  width: 250px;
  margin-left: -150px;
  height: 75px;
  border-radius: 0px 35px 35px 0px;
  background-color: gray;
  background: #2B2B2B;
}
#twitch-pasek-przycisk {
  position: absolute;
  float: right;
  height: 75px;
  width: 75px;
  border: 5px;
  border-radius: 50%;
  background-color: black;
  outline: none;
}
#licznik {
  background-color: black;
  width: 150px;
  height: 50px;
  color: white;
}
#twitch-pasek-przycisk:focus {
  background-color: white;
  border: 0px;
  outline: none;
}
#twitch-kontener {
  position: absolute;
  margin-top: 5px;
  float: right;
  height: 70px;
  margin-left: -10px;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="twitch-pasek">
  <div id="twitch-kontener">
    Informations
  </div>



</div>
<br/>
<button id="twitch-pasek-przycisk"></button>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<span id="licznik"> Counter: </span>

＆＃13;

Answer 2

当您点击进入点击事件时e每次初始化为0 使用这个

 $(document).ready(function(){
          var e=0;
          $("#twitch-pasek-przycisk").click(function(){
                e=e+1;
                if(e%2==0)
                {
                   $("#twitch-pasek").animate({left: '-150px'});
                }
                $("#twitch-pasek").animate({left: '150px'});
                var i=document.getElementById('licznik');
                i.innerHTML = e;
           });
});

jQuery动画取决于点击次数

2 个答案: