jquery双功能每个答案

【问题标题】：jquery double function eachjquery双功能每个
【发布时间】：2011-09-20 12:07:09
【问题描述】：

我不止一次拥有以下 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 图像在所有页面中都被替换了。我没有为每个页面单独操作。每次点击都会使动作发生在所有页面中。

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

【问题讨论】：

您是指car_detail 的ID 还是类别？代码说明了一件事，而问题文本说明了另一件事。
一开始我有id，但是为了影响所有car_detail（因为我不止一个）我改成了class

标签： javascript jquery each

【解决方案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);
});

【讨论】：

谢谢！我完全按照你说的做了，就像我认为它只会影响第一个#page 中的第一个#car_detail。如果我在第二个#page 中单击拇指，则该操作将发生在第一个#car_detail 中，而不仅仅是在第二个#car_detail 中。我不知道我是否很好地解释了我的观点，但我有不止一个#car_detail。如果我使用 .car_detail，它会影响所有的 car_detail 一次
你能把.car_detail的HTML也贴出来吗？
它在我的第一篇文章 - 第三行。所有的 html 块将被重复。我希望我有所启发。有任何问题请随时询问我（们。非常感谢
很奇怪，但无论如何它都不起作用。我在 function() 之后放了一个警报，在第二种情况下它没有显示出来
@user794035：更新了帖子并添加了一个工作示例。请检查

【解决方案2】：

您需要将context 分配给您的子节点：

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

[edit] Cybernate 找到了一种更好的方法来做你想做的事。我的回答主要解释了为什么您的代码没有按您的意愿工作

【讨论】：

谢谢，但它不起作用:(我认为问题可能出在最后一部分：$('.car_detail', this)....

【解决方案3】：

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

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

HTML

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

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

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

【讨论】：