jquery - attr Daten laufen nur auf dem ersten div class

Question

Basicly i eine Funktion setTimeout als attr gemacht, jetzt das Problem, das ich habe, dass es immer

Mit dem folgenden Code die erste Klasse von Datenzeit zeigen, Daten -Zeit nur Anruf von der ersten Klasse

<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

Problem ist in div Element Selektoren. $('.logo'), $('.heading'), $('.subheading') wird Array von Elementen zurückgeben, Sie sollten also alle gewünschten Elemente auf jedes gefundene Element anwenden.

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

 
animationstart(); 
 

 
function animationstart() { 
 
    val.each(function(index, foundElements) { 
 
     \t foundElements.each(function(element) { 
 
     \t var $this = $(this); 
 
     \t var time = $(this).attr('data-time'); 
 
     \t setTimeout(function() { 
 
      $this.addClass('animated'); 
 
     \t }, time); 
 
     \t 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>

Answer 2

unten finden code-

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

 
})}

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

Answer 3

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

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

Du Looping nur Array. Sie müssen durch alle Elemente durchlaufen, um Ihre Anforderung zu erfüllen. https://jsfiddle.net/9ah90pzu/2/