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

Question

我对 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/

有没有办法改变它，这样我就可以添加尽可能多的相应选择器和目标，而无需向脚本添加新函数？

谢谢

Answer 1

所做的更改

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