javascript - 将 onclick 更改图像附加到没有 id 标签的可变 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-detailsShowcaseImage')

所以：

$('.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

Answer 2

您不需要 id 来附加事件处理程序或使用任何 jQuery 函数，jQuery 提供了大量的选择器，您可以使用和组合来获取您需要的元素。在您的情况下，您的图像已经有一个类，因此请使用类选择器：

$('.IDX-detailsShowcaseImage').click(your_function);

Answer 3

在 jQuery 中，单击时附加到所有图像，如下所示：

$(document).on("click", ".IDX-detailsShowcaseImage img", function(){
     var img_src = $(this).attr('src')
     //your code here
});

因此，您可以动态创建<img>元素并仍然响应所有点击事件并使用$(this).

Answer 4

您可以使用 jQuery 选择器来选择某个类/id 的所有子元素

$(".IDX-showcaseSlide img").click(function);

Answer 5

这不使用 id，适用于所有细节图像：

$(".IDX-detailsShowcaseImage").click(function(arg) {
    $(".IDX-detailsPhotoWrap img").attr('src', $(arg.target).attr('src'));
});

http://jsfiddle.net/2GwEm/9/