改进许多相应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');
    });        
});

演示小提琴