Javascript jquery每个都有两个函数

我不止一次看到下面的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-->

我想做的是：每个页面都有一块拇指，当我点击任何拇指时，#car#u detail中的图像将替换为我点击的拇指图像。现在我可以这样做了，但是所有页面中的#car#u细节图像都被替换。我不会为每一页单独获取操作。每次单击都会使操作在所有页面中发生

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

您需要给您的子节点：

 $('.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函数给定的当前元素

---

[编辑]Cybernate找到了一个更好的方法来做你想做的事。我的回答主要解释了为什么您的代码没有按您所希望的那样工作

您不需要迭代jquery选择器结果的每个元素来绑定单击事件。
如果您缺少thumbsContainer div的结束div，请在每个结束div之前添加它

另外，如果您有一个id为car\u detail的元素，那么您应该使用

#car\u detail

而不是

.car\u detail

工作示例@

试试这个：

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

如果.detail\u img元素用于汽车细节图像，则可以将上述代码简化为：

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

---

我认为你在这方面的做法是错误的

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

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

$（'.car'）。单击.car div或
var get_car=$（this.clone（）；//复制.car并克隆它及其子项
$（'.holder'）.html（''）.append（get_car）；//将克隆放在holder分区中。。。
});

---

我认为这就是你应该做的，简单而优雅。。。我不明白你为什么这么复杂：）

你是指

汽车细节的ID或类别吗？代码说明了一件事，问题文本说明了另一件事。最初我有id，但由于影响了所有汽车的细节（因为我有不止一个），我改为ClassThank！我完全按照你说的做了，就像我想的那样，这只会影响第一页中的第一辆车的细节。如果我在第二页点击拇指，动作将出现在第一个车的细节中，而不仅仅是第二个车的细节。我不知道我是否能很好地解释我的观点，但我有不止一个汽车细节。如果我使用.car\u detail，它会影响所有的car\u细节，因为你也可以发布.car\u detail的HTML吗？它在我发布的第一行-第三行。所有html块都将重复。我希望我能有所启发。任何问题…请随意提问。非常感谢，但无论如何都不行。我在函数（）后面放了一个警报，在第二种情况下，它不显示Up@user794035：更新了帖子并添加了一个工作示例。请检查谢谢，但它不起作用：（我想问题可能在最后一部分：$（'car_detail'，this）。。。。
$('.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...
});