Wie mehrere Bilder basierend auf Klickereignissen auf mehreren Schaltflächen mit Jquery angezeigt werden

Question

Ich möchte mehrere Schaltflächen haben, die eine Funktion auslösen, die die src in einem img-Tag ändert.
Mit jeder Schaltfläche wird ein bestimmtes Bild in diesem einen IMG-Tag angezeigt. Es ist eine Seite, wo ich verschiedene Grundrisse für eine Wohnung zeigen möchte, also die Knöpfe sagen "Typ 1", "Typ 2", "Typ 3", "Typ 4", etc.
Es gibt keine bestimmte Menge von Typen für jedes Projekt.
Ich möchte die Funktion funktionieren lassen, egal wie viele Optionen es gibt.

Ich habe dieses Recht jetzt, aber nicht wissen, wie

<section id="floor-plans"> 
<div class="wrapper"> 
    <div class="img-links"> 
    <input type="button" onclick="changeImg()" value="Tipo 1"> 
    <input type="button" onclick="changeImg()" value="Tipo 2"> 
    <input type="button" onclick="changeImg()" value="Tipo 3"> 
    <input type="button" onclick="changeImg()" value="Tipo 4"> 
    <input type="button" onclick="changeImg()" value="Tipo 5"> 
    </div> 
    <div class="featured-img"> 
    <img src="images/planos/001.jpg" alt=""> 
    </div> 
</div> 

fortsetzen konnte ich die "X" Menge von Optionen mit

var options = $('img-links input').lenght(); 

aber kippe Zahl verwalten heraus, wie man weitermacht.

repräsentiert Dieses Bild deutlicher, was ich

Vielen Dank im Voraus erreichen wollen view image

Answer 1

Sie wollen Ereignis Delegation verwenden. Sie fügen dem übergeordneten Element (img-links) ein click-Ereignis hinzu, das Klicks verarbeitet, die von den Schaltflächen ausgehen.

Auch wäre es besser, den Button-Wert von der img src zu trennen.

$('.img-links').on('click', 'input', function(){ 
    var src = $(this).attr('data-src'); 
    $('.featured-img img').attr('src', src); 
}); 

das Onclick-Attribut entfernen:

<div class="img-links"> 
    <input type="button" value="Tipo 1" data-src="/image01.jpg" /> 
    <input type="button" value="Tipo 2" data-src="/image02.jpg" /> 
    <input type="button" value="Tipo 3" data-src="/image03.jpg" /> 
    <input type="button" value="Tipo 4" data-src="/image04.jpg" /> 
    <input type="button" value="Tipo 5" data-src="/image05.jpg" /> 
    </div> 

Der Code ausgeführt werden muss nach .img-Links in dem DOM vorhanden ist, vorzugsweise indem sie in einem $(document).ready(function(){ ... }); Zugabe, aber es kann, bevor die Eingabetaste ausgeführt werden hinzugefügt, so dass Sie nach dem Laden der Seite dynamisch weitere hinzufügen können und es wird weiterhin funktionieren.

Answer 2

Please try again 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
function changeImg(src){ 
    $('.featured-img img').attr('src', src); 
} 
</script> 

<section id="floor-plans"> 
<div class="wrapper"> 
    <div class="img-links"> 
    <input type="button" onclick="changeImg('images/1.jpg')" value="Tipo 1"> 
    <input type="button" onclick="changeImg('images/2.jpg')" value="Tipo 2"> 
    <input type="button" onclick="changeImg('images/3.jpg')" value="Tipo 3"> 
    <input type="button" onclick="changeImg('images/BEST.jpg')" value="Tipo 4"> 
    <input type="button" onclick="changeImg('images/Good.jpg')" value="Tipo 5"> 
    </div> 
    <div class="featured-img"> 
    <img src="images/1.jpg" alt=""> 
    </div> 
</div> 
</section>