Question

我正在尝试计算 fadeToggle 按钮出现的次数，并将其作为文本包含在 <p> 段落元素中。

$(function () {
  var box = $("#box");
  var para = $("#p");
  var count = 0;
  for (var i = 0; i < 10; i++) {
    function toggleBox(i) {
      box.fadeToggle(500, function () {
        count++;
        para.text() = count(i);
      });
    }

    toggleBox(i);
  }
});

Answer 1

像你那样在 for 循环中添加一个函数并不是一件好事。最好将你的淡入淡出动画放在一个函数中，然后在淡入完成后调用它里面的函数，它会创建循环，直到到达max_count
也在 jquery 中使用 para.text(count) 而不是 para.text() = count(i);

使用 fadeToggle，动作发生在元素显示之后和隐藏之后

$(function () {
  var box = $("#box");
  var para = $("#p");
  var count = 1;
  var max_count = 10;
  toggleBox(box , para , count , max_count);
});

function toggleBox(box_selector , para_selector , count , max_count) {
  $(box_selector).fadeToggle(500, function () {
    $(para_selector).text(count);
    if(count < max_count){
      toggleBox(box_selector , para_selector , count + 1 , max_count);
    }
  });
}

#box{
  background : red;
  width : 100px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box"></div>
<p id="p"></p>

使用 fadeOut 和 fadeIn 将在元素隐藏显示后发生动作

$(function () {
  var box = $("#box");
  var para = $("#p");
  var count = 1;
  var max_count = 10;
  toggleBox(box , para , count , max_count);
});

function toggleBox(box_selector , para_selector , count , max_count) {
  $(box_selector).fadeOut(500, function () {
    $(box_selector).fadeIn(500 , function(){
      $(para_selector).text(count);
      if(count < max_count){
        toggleBox(box_selector , para_selector , count + 1 , max_count);
      }
    });
  });
}

#box{
  background : red;
  width : 100px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box"></div>
<p id="p"></p>

计算按钮出现的次数

1 个答案: