Vereinfachen JQuery Snippet

Question

Hallo Freunde erfahren,

Ich mag würde dieses Snippet JQuery vereinfachen, ist es möglich?

Ich versuchte zu vereinfachen, hatte aber keinen Erfolg, was ich tun konnte, war, alle img.main auszuwählen, aber beim Schweben erhielten alle Bilder die Klasse imgHover.

$("#1 button").hover(function() { 
    $("#1 img.main").toggleClass("imgHover"); 
}); 

$("#2 button").hover(function() { 
    $("#2 img.main").toggleClass("imgHover"); 
}); 

$("#3 button").hover(function() { 
    $("#3 img.main").toggleClass("imgHover"); 
}); 

$("#4 button").hover(function() { 
    $("#4 img.main").toggleClass("imgHover"); 
}); 

$("#5 button").hover(function() { 
    $("#5 img.main").toggleClass("imgHover"); 
}); 

$("#6 button").hover(function() { 
    $("#6 img.main").toggleClass("imgHover"); 
}); 

Danke

Answer 1

eine gemeinsame Klasse auf die Elemente hinzufügen, die derzeit die 1,2,3 haben ... IDs z.B.

<div id="1" class="newClassName"> 
    <button>Click me</button> 
    <img class="main" /> 
</div> 

Dann verallgemeinert JQuery wie folgt verwenden:

$(".newClassName button").hover(function() { 
    $(this).closest(".newClassName").find("img.main").toggleClass("imgHover"); 
}); 

Diese Umgebung (newClassName) Element finden, dann innerhalb dass das Bild finden und die Klasse gelten. Auf diese Weise wird JS funktionieren, unabhängig davon, welche Sektion gerade aktiviert ist.