Question

我正在尝试制作一个简单的照片浏览器，我想知道如何选择该图像的src，以便更改大图像（.big-t）

到目前为止，这是HTML + JS代码部分：



      $("#ImageFound").click(function(e){    
          var bigthumb = $("#ImageFound").attr("src");
          alert(bigthumb);
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="diaporama-thumbs" id="wabi3-slider">
  <div class="thumb-preview">
    <img id="big-thumb" class="big-t" src="big-image1.png" />
  </div>
  <div class="small-thumbs">
    <div class="thumbs-container">
      <div class="small-pre">
        <a id="FindImage" href="#"><img id="ImageFound" src="image1.png"/></a>
      </div>
      <div class="small-pre">
        <a id="FindImage" href="#"><img   id="ImageFound" src="image2.png"/></a>
      </div>
    </div>
  </div>
</div>

即使点击第二张小图片，$("#ImageFound").click(function(e){ var bigthumb = $("#ImageFound").attr("src"); alert(bigthumb); });也只返回“image1”

Answer 1

$(".small-pre img").click(function(e){    
  var smallSrc = $(this).attr("src");
  var bigSrc = "big-"+ smallSrc;

  showPicture(bigSrc);
  
  //alert(bigSrc);
});


function showPicture(src){

  $(".thumb-preview img").attr("src", src)

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="diaporama-thumbs" id="wabi3-slider">
  <div class="thumb-preview">
    <img id="big-thumb" class="big-t" src="big-image1.png" />
  </div>
  <div class="small-thumbs">
    <div class="thumbs-container">
      <div class="small-pre">
        <a href="#"><img src="image1.png"/></a>
      </div>
      <div class="small-pre">
        <a  href="#"><img src="image2.png"/></a>
      </div>
    </div>
  </div>
</di>

在jquery / js中选择不同的图片

1 个答案: