jquery 双功能each

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'));
            });
        });
});

我想要做的是：对于每个页面都有一个拇指块，当我单击任何拇指时，#car_detail 中的图像将被替换为我点击的拇指的图像。目前我可以做到这一点，但是#car_detail 图像在所有页面中都被替换。我没有获得每个页面的单独操作。每次点击都会使该操作发生在所有页面中。

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

Answer 1

您无需遍历 jquery 选择器结果的每个元素来绑定单击事件。
并且您缺少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);
});

Answer 2

您需要为您的子节点提供上下文：

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

每个this都指向由调用它的 jquery 函数给出的当前元素。

[编辑] Cyber​​nate 找到了一种更好的方法来完成您想做的事情。我的回答主要解释了为什么你的代码没有按你想要的方式工作

Answer 3

我认为你对此有错误的方法，

你应该使用克隆，你会没事的...

HTML

<div class="holder">Replace Me</div>
<div>
    <div class="car"><img src="img1" /></div>
    <div class="car"><img src="img2" /></div>
</div>

JS

$('.car').click(function(){//when you click the .car div or <img/>
    var get_car =   $(this).clone();//copy .car and clone it and it's children 
    $('.holder').html('').append(get_car);//put the clone to the holder div...
});

我认为这就是你应该做的，简单又优雅...不明白为什么你这么复杂:)