Question

Hello经验丰富的朋友，

我想简化这个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都可以工作。

简化JQuery代码段

1 个答案: