Wie eine JQuery-Funktion auf verschiedene HTML-Elemente zu loopen

Question

Okay, ich versuche, einen Folie Übergang zu erstellen, wenn der Benutzer auf einer bestimmten Box schwebt. Ich habe die Funktion unten, aber ich frage mich, gibt es eine Möglichkeit, durch verschiedene Boxen zu durchlaufen, anstatt eine kopierte Funktion und Klasse mit jeder neuen Folie Übergangsbox zu erstellen.

//Slide Function-- Start (below)--- 
$("#slide_1").hover(function(){ 
    $("#slideimg1").slideDown("slow"); 
}, 
function(){ 
    $("#slideimg1").slideUp("slow"); 
}); 
//Slide Function--End (above)--- 
//Slide Function---Start (below) --- 
$("#slide_2").hover(function(){ 
    $("#slideimg2").slideDown("slow"); 
}, 
function(){ 
    $("#slideimg2").slideUp("slow"); 
}); 
//Slide Function---End (above) --- 
//Slide Function---Start (below) --- 
$("#slide_3").hover(function(){ 
    $("#slideimg3").slideDown("slow"); 
}, 
function(){ 
    $("#slideimg3").slideUp("slow"); 
}); 
//Slide Function---End (above) --- 
//Slide Function---Start (below) --- 
$("#slide_4").hover(function(){ 
    $("#slideimg4").slideDown("slow"); 
}, 
function(){ 
    $("#slideimg4").slideUp("slow"); 
}); 
//Slide Function---End (above) --- 
//Slide Function---Start (below) --- 
$("#slide_5").hover(function(){ 
    $("#slideimg5").slideDown("slow"); 
}, 
function(){ 
    $("#slideimg5").slideUp("slow"); 
}); 
//Slide Function---End (above) --- 
//Slide Function---Start (below) --- 
$("#slide_6").hover(function(){ 
    $("#slideimg6").slideDown("slow"); 
}, 
function(){ 
    $("#slideimg6").slideUp("slow"); 
}); 
//Slide Function---End (above) --- 
//Slide Function---Start (below) --- 
$("#slide_7").hover(function(){ 
    $("#slideimg7").slideDown("slow"); 
}, 
function(){ 
    $("#slideimg7").slideUp("slow"); 
}); 
//Slide Function---End (above) --- 
//Slide Function---Start (below) --- 
$("#slide_8").hover(function(){ 
    $("#slideimg8").slideDown("slow"); 
}, 
function(){ 
    $("#slideimg8").slideUp("slow"); 
}); 
//Slide Function---End (above) --- 

Anstatt also einen neuen slidimg(n) des Schreibens, wo n eine Zahl ist, und ein neues slide_n wo n eine Zahl ist, ist es eine Möglichkeit, um eine Funktion zu erstellen, die Schleife irgendwie wird.

Sorry, wenn das nicht sehr einfach ist. Ziemlich neu für diese Art von Sachen.

Answer 1

Vermeiden Sie die Verwendung des ID-Selektors .

Erstellen Sie für diese Komponenten eine spezifische class oder , und hängen Sie den Ereignishandler mithilfe des jQuery-Selektorkonzepts an, anstatt mehrere Funktionen für dynamisch erstellte Elemente zu erstellen.

Werfen Sie einen Blick auf die. on() Event-Handler-Anhang, mit dem Sie Ereignishandler an dynamisch hinzugefügte Elemente anhängen können, wenn die selector übereinstimmt.

---

EDIT: Einschließlich Code-Schnipsel für mehr Klarheit

Hier ist ein kleines Beispiel dafür, wie Looping zu vermeiden:

Wie unten zu sehen ist, sind wir mit class Selektor das finden family von Dias und anschließendes Anbringen eines Handlers; Hier müssen wir den Handler nicht an spezifische Folien mit #id Selektor anhängen, wie wir sie auf der Grundlage ihrer Familie ODER mit anderen Worten mit class() Selektor auswählen.

Obwohl jede Folie eine id hat, verwenden wir sie nicht, da das Verhalten, das wir zu erreichen versuchen, dasselbe ist; aber Wenn wir möchten, dass sich eine Folie anders verhält, können wir ihre ID verwenden (oder sogar Attribute dafür setzen), um Eindeutigkeit abzuleiten (und sie basierend auf ihrem Attribut/ihrer ID anders zu verhalten).

/* Using `hover` */ 
 

 
$(".slide").hover(function() { 
 
    $(this).find("img").slideDown("slow"); 
 
    }, 
 
    function() { 
 
    $(this).find("img").slideUp("slow"); 
 
    }); 
 

 

 
/* Using `on` ; Comment the above and un-comment the below to see the same effect */ 
 

 
/* 
 
$(".slide").on({ 
 
    mouseenter: function() { 
 
    $(this).find('img').slideDown('slow'); 
 
    }, 
 
    mouseleave: function() { 
 
    $(this).find("img").slideUp("slow"); 
 
    } 
 
}); 
 
*/

.slides { 
 
    padding: 10px; 
 
} 
 
.slides > div { 
 
    padding: 10px; 
 
    margin: 40px 0; 
 
    border: 1px solid #dddddd; 
 
    border-radius: 10px; 
 
} 
 
.slides img { 
 
    width: 200px; 
 
    height: 200px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> 
 

 
<div class="slides"> 
 

 
    <div id="slide_1" class="slide"> 
 
    <span>University of Oxford</span> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Oxfordceremony.jpg" alt="Degree Ceremony at University of Oxford" /> 
 
    </div> 
 

 
    <div id="slide_2" class="slide"> 
 
    <span>The University of Bologna</span> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Bologna-vista02.jpg/300px-Bologna-vista02.jpg" alt="The University of Bologna" /> 
 
    </div> 
 

 
    <div id="slide_3" class="slide"> 
 
    <span>Heidelberg University</span> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Heidelberg_Universit%C3%A4tsbibliothek_2003.jpg/220px-Heidelberg_Universit%C3%A4tsbibliothek_2003.jpg" alt="Heidelberg University" /> 
 
    </div> 
 

 
    <div id="slide_4" class="slide"> 
 
    <span>King's College London</span> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Strand102.jpg/220px-Strand102.jpg" alt="King's College London" /> 
 
    </div> 
 

 
</div>