JQueryスニペットを簡略化

Question

こんにちは経験豊富な友人

このJQueryのスニペットを簡略化したいと思いますか？

私は単純化しようとしましたが、成功しませんでした。私ができることは、すべてのimg.mainを選択していましたが、ホバリングでは、すべての画像がクラス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"); 
}); 

あなたは

Answer 1

現在、1,2,3 ... IDは、例えば持つ要素に共通するクラスを追加します。ありがとうございました

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

次に、このような一般化はJQueryを使用する：

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

これは、その内の画像を見つけて、クラスを適用し、周囲（newClassName）要素を見つけます。そうすれば、このJSは、どのセクションが浮かび上がっても問題なく動作します。