时间戳

首页 > 解决方案 > 计算按钮出现的次数

jquery - 计算按钮出现的次数

问题描述

我正在尝试计算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);
  }
});

标签： jquery

解决方案

  • 像你一样在for循环中添加一个函数不是一件好事。最好将你的淡入淡出动画放在一个函数中，然后在fadeIn完成后调用它里面的函数，它将创建循环直到到达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>

推荐阅读