Wie würde ich das in loop?

Question

Ich versuche, die Funktionalität für Schaltflächen, die ich gemacht habe, zu loopen. Ich habe 3 Videosammlungen. und sie alle brauchen das gleiche Skript für das nächste und das vorherige.

Was ich will ist, dass ich nur einen nächsten Knopf und einen vorherigen Knopf machen muss. Dies ist, was es tun soll:

$("#next-1").click(function(){ 
 
\t \t var $this = $(".video-album-1"); 
 
\t \t callback = function() { 
 
    \t \t $this.insertBefore($this.siblings(':eq(2)')); 
 
    \t } 
 
    \t $this.fadeOut(200, callback).fadeIn(400); 
 
\t }); 
 

 
\t $("#prev-1").click(function(){ 
 
\t \t var $this = $(".video-album-1"); 
 
\t \t callback = function() { 
 
    \t \t $this.insertAfter($this.siblings(':eq(3)')); 
 
    \t } 
 
    \t $this.fadeOut(200, callback).fadeIn(400); 
 
\t }); 
 

 
\t $("#next-2").click(function(){ 
 
\t \t var $this = $(".video-album-2"); 
 
\t \t callback = function() { 
 
    \t \t $this.insertBefore($this.siblings(':eq(2)')); 
 
    \t } 
 
    \t $this.fadeOut(200, callback).fadeIn(400); 
 
\t }); 
 
\t 
 
\t $("#prev-2").click(function(){ 
 
\t \t var $this = $(".video-album-2"); 
 
\t \t callback = function() { 
 
    \t \t $this.insertAfter($this.siblings(':eq(3)')); 
 
    \t } 
 
    \t $this.fadeOut(200, callback).fadeIn(400); 
 
\t });

ich bereits Schleife versucht haben, aber das funktioniert nicht:

for (i = 0; i < 3; i++) { 
 
\t $("#next-"+i).click(function(){ 
 
\t \t var $this = $(".video-album-"+i); 
 
\t \t callback = function() { 
 
    \t \t $this.insertBefore($this.siblings(':eq(2)')); 
 
    \t } 
 
    \t $this.fadeOut(200, callback).fadeIn(400); 
 
\t }); 
 

 
\t $("#prev-"+i).click(function(){ 
 
\t \t var $this = $(".video-album-"+i); 
 
\t \t callback = function() { 
 
    \t \t $this.insertAfter($this.siblings(':eq(3)')); 
 
    \t } 
 
    \t $this.fadeOut(200, callback).fadeIn(400); 
 
\t }); 
 
}

Kann mir jemand eine Lösung geben? Ich möchte nicht wiederholt # Next-3 # Next-4-IDs usw. erstellen.

Vielen Dank im Voraus.

Answer 1

Können Sie einen Blick auf folgenden Ansatz:

$("[id^=next-]").click(function(){ 
    var current_id = $(this).attr("id"); 
    var number = current_id.replace("next-",""); 

    var $this = $(".video-album-"+number); 
    callback = function() { 
     $this.insertBefore($this.siblings(':eq(2)')); 
    } 
    $this.fadeOut(200, callback).fadeIn(400); 
}); 

$("[id^=prev-]").click(function(){ 
    var current_id = $(this).attr("id"); 
    var number = current_id.replace("prev-",""); 

    var $this = $(".video-album-"+number); 
    callback = function() { 
     $this.insertAfter($this.siblings(':eq(3)')); 
    } 
    $this.fadeOut(200, callback).fadeIn(400); 
}); 

Hier haben wir jQuery beginnt mit Wahl werden nach der Veranstaltung erforderlich DOM-Elemente zu befestigen und im Event-Handler wir die entsprechende Nummer für weitere Verfahren sind Grabbing.

Answer 2

This question und ihre Antworten erklären, warum Ihr Versuch nicht richtig funktioniert.

Basierend auf Ihrer for Schleife versucht, wird diese Arbeit:

$("[id^=next-]").click(function() { 
    var i = this.id.substring(5); 
    var album = $(".video-album-" + i); 
    callback = function() { 
     album.insertBefore(album.siblings(':eq(2)')); 
    }; 
    album.fadeOut(200, callback).fadeIn(400); 
}); 
$("[id^=prev-]").click(function() { 
    var i = this.id.substring(5); 
    var album = $(".video-album-" + i); 
    callback = function() { 
     album.insertAfter(album.siblings(':eq(3)')); 
    }; 
    album.fadeOut(200, callback).fadeIn(400); 
}); 

, die mithilfe einer Attribut funktioniert beginnt mit Selektor alle Ihre next- (und prev-) Tasten übereinstimmen, dann den Index herausfindet von der id der Schaltfläche tatsächlich geklickt.

Aber es gibt wahrscheinlich eine bessere Antwort, die wir Ihnen geben könnten, wenn Sie Ihren HTML-Code zitieren.

Answer 3

eine Klasse mit next(),prev(),find() Verwenden Sie das Video Album-Klasse basiert auf den nächsten/vorherigen Elemente zu erhalten oder diese

$('[id^="next-"]').click(function(){ 
     var i = $(this).attr('id').split('-')[1]; 
     var $this = $(".video-album-"+i); 
     callback = function() { 
      $this.insertBefore($this.siblings(':eq(2)')); 
     } 
     $this.fadeOut(200, callback).fadeIn(400); 
    }); 

    $('[id^="prev-"]').click(function(){ 
     var i = $(this).attr('id').split('-')[1]; 
     var $this = $(".video-album-"+i); 
     callback = function() { 
      $this.insertAfter($this.siblings(':eq(3)')); 
     } 
     $this.fadeOut(200, callback).fadeIn(400); 

Answer 4

Ich werde betonen jetzt dies nur eine Art und Weise hacken verwenden ist, kann es bessere sein

diese Unter der Annahme, sind Ihre Tasten

<button class="next" data-videocollectionname="video1">next</button> 
<button class="next" data-videocollectionname="video2">next</button> 
<button class="next" data-videocollectionname="video3">next</button> 

<button class="previous" data-videocollectionname="video1">previous</button> 
<button class="previous" data-videocollectionname="video2">previous</button> 
<button class="previous" data-videocollectionname="video3">previous</button> 

ich jede Taste ein Datenattribut gegeben haben zu sagen, welche Sammlung der Taste zu relevant ist.

mir verzeihen, wenn ich vermisse habe die Frage verstanden

$(".next").click(function(){ 
    var videoCollectionName = $(this).data("videocollectionname"); 
    var videoElement = $("#"+videoCollectionName); 

//do whatever code you want for the videocollection 

}); 

$(".previous").click(function(){ 
    var videoCollectionName = $(this).data("videocollectionname"); 
    var videoElement = $("#"+videoCollectionName); 

//do whatever code you want for the videocollection 

});