ボタンをクリックして2画像を変更します

Question

私は2つのボタンと2つの画像領域を持っています。私はボタンをクリックすると、私は2エリアを変更したい。 ＃エリアイメージは変更されましたが、＃エリア2イメージは変更できません。私はあなたがどちらの場合も同じ要素にイベントリスナーを結合している二重のdata-rel

$(document).ready(function() { 
 
    $("button").click(function() { 
 
     var imgUrl = $(this).data('rel'); 
 
     $("#area2").html("<img src='" + imgUrl + "' class='son' />"); 
 
     $(".son").hide().fadeIn(2000); 
 
    }); 
 
    
 
    $("button").click(function() { 
 
    var imgUrl = $(this).data('rel'); 
 
    $("#area").html("<img src='" + imgUrl + "' class='single-img-vin' />"); 
 
    $(".single-img-vin").hide().fadeIn(2000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="area" src="img1.jpg" class="single-img-vin" alt=""> 
 
<img id="area2" src="img-sec1.jpg" class="son"> 
 
<ul> 
 
    <li> 
 
     <button class="small-image" data-rel="img1.jpg" data-rel="img-sec-1.jpg""> 
 
     <img src="icon1.png" class="picker-color" /> 
 
     </button> 
 
    </li> 
 
    <li> 
 
     <button class="small-image" data-rel="img2.jpg" data-rel="img-sec-2.jpg"> 
 
     <img src="icon2.png" class="picker-color"> 
 
     </button> 
 
    </li> 
 
</ul>

Answer 1

を使用しています。それらを一意にするにはidを使います。

$(document).ready(function() { 
 
    $("#btn1").click(function() { 
 
     var imgUrl = $(this).data('rel'); 
 
     $("#area2").html("<img src='" + imgUrl + "' class='son' />"); 
 
     $(".son").hide().fadeIn(2000); 
 
    }); 
 
    
 
    $("#btn2").click(function() { 
 
    var imgUrl = $(this).data('rel'); 
 
    $("#area").html("<img src='" + imgUrl + "' class='single-img-vin' />"); 
 
    $(".single-img-vin").hide().fadeIn(2000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="area" src="img1.jpg" class="single-img-vin" alt=""> 
 
<img id="area2" src="img-sec1.jpg" class="son"> 
 
<ul> 
 
    <li> 
 
     <button id="btn1" class="small-image" data-rel="img1.jpg" data-rel="img-sec-1.jpg""> 
 
     <img src="icon1.png" class="picker-color" /> 
 
     </button> 
 
    </li> 
 
    <li> 
 
     <button id="btn2" class="small-image" data-rel="img2.jpg" data-rel="img-sec-2.jpg"> 
 
     <img src="icon2.png" class="picker-color"> 
 
     </button> 
 
    </li> 
 
</ul>