jquery - 为许多相应的div改进jQuery

我对jQuery和学习还是比较陌生，我创建了下面的代码/脚本来满足我的需要，但是我必须为我添加的每个选择器和目标创建一个新函数，并且代码最终会变长。我打算至少有10个选择器和目标。

因此，当您将鼠标悬停在一个选择器(按钮)上时，它会向该按钮添加一个事件类(将其从其他按钮中删除)，并保持打开状态，直到您选择另一个按钮，同时又切换出目标(在这种情况下为不同的img)。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<style>
body {
    background:grey;
}
#terrace-fw-wrap {
    display:block;
    width:100%;
    max-width:600px;
    margin: auto;
    text-align: center;
}

#terrace-fw-wrap .content {
    display:block;
    width:100%;
}

#terrace-fw-wrap .content .img {
    display:none;
    width:100%;
}

.active-img {
    display:block !important;
    width:100% !important;
}

#terrace-fw-wrap .buttons .but {
    display:inline-block;
    width:150px;
    padding:10px;
    margin:10px;
    text-align: center;
    color:black;
    background:white;

}

#terrace-fw-wrap .buttons .but:hover {
    color:white;
    background:black;
    cursor: pointer;
}

.active-but {
    color:white !important;
    background:black !important;

}

</style>

<section id="terrace-fw-wrap">
    <section class="content">
        <img class="img img1 active-img" src="http://s9.postimg.org/oatcz7bpr/img1.jpg" />
        <img class="img img2" src="http://s9.postimg.org/6314c1xxr/img2.jpg" />
        <img class="img img3" src="http://s30.postimg.org/llqz7e7yp/img3.jpg" />
    </section>
    <div class="buttons">
        <div class="but but1">
            Button 1
        </div>
        <div class="but but2">
            Button 2
        </div>
        <div class="but but3">
            Button 3
        </div>
    </div>
</section>


<script>
$(function(){
    $('.but1').hover(function(){
      $('.img1').addClass('active-img');
      $('.img2').removeClass('active-img');
      $('.img3').removeClass('active-img');
      $('.but1').addClass('active-but');
      $('.but2').removeClass('active-but');
      $('.but3').removeClass('active-but');
    });
});

$(function(){
    $('.but2').hover(function(){
      $('.img2').addClass('active-img');
      $('.img1').removeClass('active-img');
      $('.img3').removeClass('active-img');
      $('.but2').addClass('active-but');
      $('.but1').removeClass('active-but');
      $('.but3').removeClass('active-but');
    });
});

$(function(){
    $('.but3').hover(function(){
      $('.img3').addClass('active-img');
      $('.img1').removeClass('active-img');
      $('.img2').removeClass('active-img');
      $('.but3').addClass('active-but');
      $('.but1').removeClass('active-but');
      $('.but2').removeClass('active-but');
    });
});
</script>

jsfiddle:https://jsfiddle.net/8btdeftu/

有没有一种方法可以更改它，以便我可以添加尽可能多的相应选择器和目标，而不必在脚本中添加新功能？

谢谢

最佳答案

所做的更改

的HTML

►将data-img=""添加到所有按钮，并显示相应的图像

解决方案

$(function(){
    $('.but1,.but2,.but3').hover(function(){
        $('.img').removeClass('active-img');
        var img = $(this).data('img')
        $("."+img).addClass('active-img');
        $('.but').removeClass('active-but');
        $(this).addClass('active-but');
    });
});

Demo Fiddle