jquery - 仅在第一个div类上运行的attr数据

Question

基本上我把函数settimeout设为attr，现在问题是我总是显示第一类数据时间

使用以下代码，仅限数据时间调用第一类

<div id="frame1">
    <div class="logo" data-time="0"></div>
    <div class="heading" data-time="600"></div>
    <div class="subheading" data-time="900"></div>
</div>
<div id="frame2">
    <div class="logo" data-time="1200"></div>
    <div class="heading" data-time="900"></div>
    <div class="subheading" data-time="600"></div>
</div>

// JS Code
var a = $('.logo');
var b = $('.heading');
var c = $('.subheading');
var val = $([a,b,c]);

animationstart();

function animationstart() {
    val.each(function() {
        var $this = $(this);
        var time = $(this).attr('data-time');
        setTimeout(function() {
            $this.addClass('animated');
        }, time);
        console.log(time);
    });
}

Answer 1

参考下面的代码 -

＆＃13;

＆＃13;

//jquery
var a = $('.logo');
var b = $('.heading');
var c = $('.subheading');
var val = $([a,b,c]);

 animationstart();
function animationstart() {
val.each(function(ind, el) {
      el.each(function(){
     var $this = $(this);
var time = $(this).attr('data-time');
  (function(t){
    setTimeout(function() {
   $this.addClass('animated');
}, t);
console.log(t);
  //
  })(time);
   })
 

})}

＆＃13;

<script   src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="frame1">
<div class="logo" data-time="0"></div>
<div class="heading" data-time="600"></div>
<div class="subheading" data-time="900"></div>
</div>
<div id="frame2">
<div class="logo" data-time="1200"></div>
<div class="heading" data-time="900"></div>
<div class="subheading" data-time="600"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

var a = $('.logo');
var b = $('.heading');
var c = $('.subheading');
var val = $([a,b,c]);

animationstart();
function animationstart() {
val.each(function() {
var $this = $(this);
$this.each(function(){
var time = $(this).attr('data-time');
setTimeout(function() {
$this.addClass('animated');
}, time);
console.log(time);
});
});
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="frame1">
<div class="logo" data-time="0"></div>
<div class="heading" data-time="600"></div>
<div class="subheading" data-time="900"></div>
</div>
<div id="frame2">
<div class="logo" data-time="1200"></div>
<div class="heading" data-time="900"></div>
<div class="subheading" data-time="600"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

您只循环数组。你必须循环遍历所有元素才能达到你的要求。 https://jsfiddle.net/9ah90pzu/2/

Answer 3

问题出在div元素选择器中。 $('.logo')，$('.heading')，$('.subheading')将返回元素数组，因此您应该将所有想要的内容应用于每个找到的元素。

var a = $('.logo');
var b = $('.heading');
var c = $('.subheading');
var val = $([a,b,c]);

animationstart();

function animationstart() {
    val.each(function(index, foundElements) {
       	foundElements.each(function(element) {
        	var $this = $(this);
        	var time = $(this).attr('data-time');
        	setTimeout(function() {
            $this.addClass('animated');
        	}, time);
        	console.log(time);
        });
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="frame1">
    <div class="logo" data-time="0"></div>
    <div class="heading" data-time="600"></div>
    <div class="subheading" data-time="900"></div>
</div>
<div id="frame2">
    <div class="logo" data-time="1200"></div>
    <div class="heading" data-time="900"></div>
    <div class="subheading" data-time="600"></div>
</div>