Question

所以如果图片有id标签，我会知道如何做到这一点没有问题，但如果没有它们我就会失去如何做到这一点。

我想点击一个缩略图，让图片变大。

问题：

图像数量各不相同，所以我希望能够将点击事件附加到所有元素。
图片没有id标记
我不能仅通过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提供了一个large number of selectors，您可以使用它并组合以获取所需的元素。在您的情况下，您的图像已经有一个类，因此请使用类选择器：

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

附加onclick更改图像到varing img amount没有id标记

5 个答案: