单击按钮，更改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图像

回答

相关问题