单击按钮，更改2图像

Question

我有2个按钮和2个图像区域。当我点击按钮我想要改变2区域。 #area图像已更改，但＃area2图像无法更改。我使用双data-rel

＆＃13;

＆＃13;

$(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);
    });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在两种情况下，您都在同一元素上绑定事件侦听器。使用id使它们成为唯一的。

＆＃13;

＆＃13;

$(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);
    });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;