Birçok karşılık gelen div için jQuery'yi geliştirin

Question

JQuery ve öğrenmeye hala nispeten yeniyim, ihtiyacım olanı yapan aşağıdaki kodu/komut dosyasını oluşturdum ama eklediğim her seçici ve hedef için yeni bir işlev oluşturmam gerekiyor ve En az 10 seçici ve hedefe sahip olmak niyetindeyim, kod sonunda uzun sürecek.

Bu yüzden, bir seçiciyi (düğme) üzerine getirdiğinizde, o düğmeye (başka düğmelerden kaldırarak) etkin bir sınıf ekler ve başka bir düğme seçene kadar açık kalır (aynı anda farklı hedefler) vaka).

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

komut dosyasına yeni bir işlev eklemek zorunda kalmadan o yüzden sadece birçok tekabül seçicileri ve hedef ekleyebilirsiniz değiştirmek için bir yolu var mı? Yapılan

Teşekkür

Answer 1

değişiklikler

HTML

Çözüm

$(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'); 
    });   
}); 

gösterilmesini ilgili görüntüler ile tüm düğmeleri

► Eklendi data-img="" Eğer sürece düğmeye data-image="imageID" ekleyip <img> ikisini bağlamak için bir kimlik vermek olarak istediğiniz kadar 10

Demo Fiddle

Answer 2

Kontrol dışarı bu Javascript, yeterince çok düğmeler ve resimler ekleyebilirsiniz.

$(this)'u kullanmak, yalnızca üzerinde bulunan düğmeye yansıtır.

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

Sen toggleClass kullanmalıdır.

<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" data-img="img1"> 
      Button 1 
     </div> 
     <div class="but but2" data-img="img2"> 
      Button 2 
     </div> 
     <div class="but but3" data-img="img3"> 
      Button 3 
     </div> 
    </div> 
</section> 
<script> 
$(document).ready(function() { 
    $(".but").hover(function(){ 
     $(".but").removeClass("active-but"); 
     $(this).toggleClass("active-but"); 

     var imgSelector = "." + $(this).data("img"); 
     $(".img").removeClass("active-img"); 
     $(imgSelector).toggleClass("active-img"); 
    }); 
}); 
</script> 

Answer 4

bu kodu kullanın, kesinlikle çalışacaktır:

İşte bu çözüm için HTML ve JS olduğunu.

$(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'); 
});   
});