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);

 });
});

<强> Fiddle

Answer 2

fade不是有效的属性。将它们切换到data-fade可以正常工作。

http://jsfiddle.net/wJftm/

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

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

   $(this).fadeOut(fade);

});

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

jQuery。每次都没有迭代

2 个答案:

标记

JS