Jqueryで複数のボタンのクリックイベントに基づいて複数の画像を表示するには

Question

imgタグのsrcを変更する関数をトリガーする複数のボタンが必要です。
各ボタンは、その1つのimgタグ内に特定の画像を表示します。それは、私がアパートのために利用可能な異なるフロアプランを表示するサイトですので、ボタンは「タイプ1」、「タイプ2」、「タイプ3」、「タイプ4」などと表示されます。
各プロジェクトのタイプ。
いくつのオプションがあっても機能を動作させたいと思います。

私は

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

が、カントの数字とオプションの "X" 量を管理することができ、今、この権利を持っているが、

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

を継続する方法がわかりませんどのように継続するか。

この画像は、私はあなたがイベントの委任を使用したいview image

Answer 1

事前 で

感謝を達成したいものをより明確に表しています。クリックイベントを親プロセス（img-links）に追加して、ボタンからのクリックを処理します。

また、ボタンの値をimg srcから分離する方がよいでしょう。

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

のonclick属性削除：コードは、好ましくは、$(document).ready(function(){ ... });に追加することで、DOMに存在するが、それは入力ボタンの前に実行することができます.imgのリンク後に実行する必要があります

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

をページの読み込み後に動的に追加できるように追加されていても動作します。

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>