0

有人可以告诉我我在这里做错了什么吗？我有以下 jQuery。它应该遍历每个.box，获取属性“fade”并将单独的淡入淡出时间应用于每个.box。但是，它会忽略var fade并立即将它们全部淡出。这不一定必须是淡入淡出，因为我想对 'each' 做几件事.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);

});
4

2 回答 2

5

你的迭代很好。但持续时间必须是一个数字，因此将其类型转换为 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);

 });
});

小提琴

于 2013-07-05T19:27:49.170 回答
3

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>
于 2013-07-05T19:29:24.560 回答