javascript - 将 onclick 更改图像附加到没有 id 标签的 varing img 数量

Question

所以如果图像有 id 标签，我会知道如何毫无问题地做到这一点，但我不知道如何在没有它们的情况下做到这一点。

http://jsfiddle.net/2GwEm/

我想单击缩略图并更改大图。

问题:

1. 图像的数量各不相同，因此我希望找到一种将点击事件附加到所有元素的方法。

2. 图片没有id标签

3. 我无法直接通过 javascript 和 jquery 直接编辑 html。

主图:

  <div id="IDX-primaryPhoto" class="IDX-detailsPhotoWrap">
  <a href="">
  <img src="CAT9536786.jpg" id="IDX-detailsPhoto">
 </a>
 </div>

缩略图:

 <div id="IDX-detailsShowcase">

    <div class="IDX-showcaseSlide" id="IDX-detailsImage1">
        <div class="IDX-showcaseContent">
        <img alt="Property Photo" src="CAT9536786.jpg" class="IDX-detailsShowcaseImage">
        </div>
    </div>

    <div class="IDX-showcaseSlide" id="IDX-detailsImage2">
        <div class="IDX-showcaseContent">
        <img alt="Property Photo" src="CAT9536786A.jpg" class="IDX-detailsShowcaseImage">
        </div> 
    </div>

</div>

Answer 1

这是OP要求我的回答。

您的缩略图有一个等级。您可以将其用作您的 jquery 选择器。

$('.IDX-detailsS​​howcaseImage')

因此:

$('.IDX-detailsShowcaseImage').click(function () {
    var href = $(this).prop('src'); //grab the src of the thumbnail
    $('#IDX-detailsPhoto').prop('src', href); //set it as the big image
});

jsfiddle.net/2GwEm/2