Question

我正在使用以下脚本

$('.cat_glass_thumbs ul li').each(function(){
    $(this).click(function(){
        orig_src = $(this).attr('data-orig');
        $('.cat_glass_thumbs a img').attr('src', orig_src);
    });
});

我有循环输出多个div，它们都是相同的结构，不同的内容。

正确我的jquery工作“.cat_glass_thumbs”div，如果我点击li，它将更新每个.cat_glass_thumb中的src，而不是仅仅更新我所在的那个。

提示/指示将不胜感激

各个html供参考：

<div class="cat_glass_thumbs">

      <a href="" title="Black/Silver" class="product-image thumbnail">
          <span class="main_image">
               <img src="t/2064-a-blk-slv-52-angle.jpg" alt="Black/Silver">
          </span>
      </a>


       <ul id="thumbs_container">
            <li class="img_thumbs" data-orig="/t/-2064-a-blk-slv-52-angle.jpg">
            </li>
            <li class="img_thumbs" data-orig="/t/-2064-a-blk-slv-52-front.jpg">
            </li>
             <li class="img_thumbs" data-orig="/t/-2064-b-blk-gld-52-angle.jpg">
             </li>
        </ul>

     </div>

Answer 1

删除each，在这种情况下它没用（jQuery自动为你做）：

$('.cat_glass_thumbs ul li').click(function(){
    var orig_src = $(this).data('orig');
    $('a img', this).attr('src', orig_src);
});

JS Fiddle Demo

请注意，我使用了jQuery documentation中描述的$('a img', this)形式的$( selector [, context ] )。

修改

单独使用JS代码让我想到了另一种HTML结构。要适合您发布的内容，您需要使用$.closest()在父.cat_glass_thumbs中定位图片：

$('.cat_glass_thumbs ul li').click(function(){ var orig_src = $(this).data('orig'); $('a img', $(this).closest('.cat_glass_thumbs')).attr('src', orig_src); });

Updated JS Fiddle

$.closest()

描述：对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

Answer 2

我认为这会奏效：

$('.cat_glass_thumbs ul li').each(function(){
    $(this).click(function(){
        orig_src = $(this).attr('data-orig');
        $(this).find("a img").attr('src', orig_src);
    });
});

Answer 3

示例中的

$（this）元素指向所有＆＃39; .cat_glass_thumbs ul li＆＃39;，你必须将变量传递给$ .each

$('.cat_glass_thumbs ul li').each(function($currentElement){
    $currentElement.click(function(){
        orig_src = $(this).attr('data-orig');
        $(this).children("img").attr('src', orig_src);
    });
});

Jquery .each，但只有当前元素

3 个答案:

JS Fiddle Demo

Updated JS Fiddle