我正在尝试计算 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);
}
});
答案 0 :(得分:2)
max_count
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>