javascript - jquery双功能每个

Question

我不止一次有以下 HTML 代码块

<div id="page_1" class="page">
<div class="imageDetail_bg">
    <img src="../_img/detail_car.jpg" alt="" id="car_detail" class="car_detail"/>
</div><!-- imageDetail-->

    <div id="listThumbs">
     <div id="thumbsContainer_1" class="thumbsContainer">
        <div id="areaThumb" class="areaThumb">
        <div id="posThumb_1" class="posThumb">
            <img src="../_img/detail_car.jpg" class="detail_img" alt="">
        </div>
        </div><!--areaThumb-->

        <div id="areaThumb" class="areaThumb">
        <div id="posThumb_2" class="posThumb">
             <img src="../_img/detail_car.jpg" class="detail_img" alt="" />
        </div>
        </div><!--areaThumb--> 
            ...
            ...
            ...
</div><!--listThumbs-->
 </div><!--page-->

和以下 jQuery 代码:

 $('.page').each(function(i) {
        $('.areaThumb').each(function(j) {
            $('.detail_img').eq(j).click(function(){
                $('.car_detail').eq(i).attr('src', $(this).attr('src'));
            });
        });
});

我想要做的是:对于每个页面都有一个缩略图 block ，当我单击任何缩略图时，#car_detail 中的图像将替换为我单击的缩略图的图像。目前我可以这样做，但是#car_detail 图像在所有页面中都被替换了。我没有为每个页面单独执行操作。每次点击都会在所有页面中发生该操作。

谁能告诉我我做错了什么？谢谢

Answer 1

您无需遍历 jquery 选择器结果的每个元素来绑定(bind)点击事件。
并且您缺少 thumbsContainer div 的结束 div，请在每个 .

此外，如果您有一个 id 为 car_detail 的元素，那么您应该使用 #car_detail 而不是 .car_detail

工作示例@ http://jsfiddle.net/2ZQ6b/

试试这个:

$(".page .areaThumb .detail_img").click(function(){
    $(this).closest("div.page").find('.car_detail').attr("src", this.src);
});

如果 .detail_img 元素用于 car_detail 图像，那么您可以将上面的代码简化为:

$(".detail_img").click(function(){
    $(this).closest("div.page").find('.car_detail').attr("src", this.src);
});