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

您需要向您的子节点提供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找到了一种更好的方法来做你想做的事。我的回答主要解释了为什么你的代码不能按你的意愿工作

Answer 2

您无需遍历jquery选择器结果的每个元素来绑定click事件你错过了一个关于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 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...
});

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

jquery每个都有双重功能

3 个答案: