计算按钮出现的次数

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>