Question

我遇到了问题：

HTML：

    <div class="img-container">
        <img id="mainImage" src="assets/img/01.png">
    </div>

和一个class="change"

的按钮

 <script>
  $(document).ready(function(){
        $( ".change" ).click(function() {
            alert('test');
            $("img#mainImage").attr("src", 'assets/img/02.png');
        });
  });
  </script>

这适用于警报，但不适用于attr。我无法改变img ...之后我想换另一张图片（03.png，04.png等等）

Answer 1

你需要一个柜台：

$(document).ready(function(){
    var counter = 1; // initialize counter by 1.
    $( ".change" ).click(function() {
        alert('test');
        var num = counter <= 9 ? '0'+counter : counter; // will return 01-09 and after 11,12 etc.
        $("img#mainImage").attr("src", 'assets/img/'+num+'.png');
        counter++; // counter increment.
    });
  });

Answer 2

HTML：

<div class="img-container">
        <img class="mainImage" id="mainImage" src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg">
    </div>

JS：

var $mainImage = $("#mainImage");
if($mainImage){
    $mainImage.click(function(){
        $(this).attr("src","https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRWZuPMvJ8bOAdo30nNZSe2sofDiOLrX1J-GkzeX5GgTJusxcFE");
    });
}

Jquery通过单击更改图像ID attr

2 个答案:

DEMO