單擊按鈕，更改2圖像

-1

我有2個按鈕和2個圖像區域。當我點擊按鈕我想改變2區。＃區域圖像已經改變，但＃區域2圖像不能。我使用雙data-rel單擊按鈕，更改2圖像

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

來源

2016-09-09 scott

目前尚不清楚你以後。你想要一個按鈕來改變第一個圖像，而另一個按鈕來改變第二個圖像？ –

您在這兩種情況下相同的元素綁定事件偵聽器。使用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>

來源

2016-09-12 15:07:46

單擊按鈕，更改2圖像

回答

相關問題