Improving jQuery for many corresponding divs

Question

I'm still relatively new to jQuery and learning, I've created the below code/script that does what I need but I have to create a new function for every selector and target I add and the code will get long in the end as I intend to have at least 10 selectors and targets.

So when you hover over a selector (button) it adds an active class to that button (removing it from other buttons) and stays on till you select another button while at the same time switching out targets (different img's in this case).

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

Is there a way to change it so I can just add as many corresponding selectors and targets without having to add a new function to the script?

Thanks

Answer 1

Changes Made

HTML

► Added data-img="" to all buttons with corresponding images to be shown

Solution

$(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

Answer 2

Check out this Javascript, you can add as many buttons and images as you want as long as you add data-image="imageID" to the button and give the <img> an ID to link the two.

Using $(this) reflects to the button that just has been hovered on.

$('.but').hover(function() {
    $('.but').removeClass('active-but');
    $(this).addClass('active-but');
    $('img').removeClass('active-img');
    $('#'+ $(this).attr('data-image')).addClass('active-img');
});

Demo Fiddle

Answer 3

Please use this code, it will work definitely.

$(function(){
$('.but').hover(function(){
var cls = $(this).attr('class').split(' ')[1];
var str = cls.slice(3);
$('.img').removeClass('active-img');
$('.but').removeClass('active-but');
$('.img'+str).addClass('active-img');
$('.but'+str).addClass('active-but');
});        
});