jQuery.每次都没有迭代

Question

有人能告诉我这里我做错了什么吗？我有以下jQuery.它应该遍历每个.box,获取属性'淡入淡出'并将各个淡入淡出时间应用于每个属性.box.然而,它忽略了它,var fade并立即将它们全部淡出.这不一定是褪色,因为我想对"每个"做几件事.box.知道我在这里做错了什么吗？你能解释一下原因吗？我非常感谢任何帮助.

<div class="box" fade="1000"></div>
<div class="box" fade="3000"></div>
<div class="box" fade="6000"></div>

-

$('.box').each(function() {

   var fade = $(this).attr('fade');

   $(this).fadeOut(fade);

});

Answer 1

你的迭代很好.但是持续时间必须是一个数字,所以将它强制转换为int:

$('.box').each(function() {

   var fade = $(this).attr('fade');
   $(this).fadeOut(+fade); //here 

});

此外,fade也不是一个有效的属性,考虑使用data-fade属性名称也可以使用jquery的数据api访问它,自动将其转换为数字.在这种情况下不需要显式强制转换,就像使用attr访问它一样.

标记

<div class="box" data-fade="1000">222</div>
<div class="box" data-fade="3000">333</div>
<div class="box" data-fade="6000">444</div>

JS

$(function(){
 $('.box').each(function() {
   var $this = $(this);
   var fade = $this.data('fade');
   $this.fadeOut(fade);

 });
});

小提琴