以单个div更新内容，所有div名称相同

Question

当所有div名称相同时，似乎只会尝试更新所选div中的图像。

<div class="collapse">img img img img img</div> 
<div class="collapse">img img img img img img img</div> 
<div class="collapse">img img img </div> 
<div class="collapse">img img img img img img</div> 

我有在data-src标记内设置图像的数据，并且当div展开时，它会加载图像。但是，由于div具有相同的类名，因此在加载展开后的div中的图像时，会加载所有折叠div中的所有图像。

$(function() { 
     $('.collapse img').attr('src', function(index, src) { 
     return this.getAttribute('data-src'); 
     }); 
    }); 

这是我的展开代码里面的代码，它如何改变为只加载当前选定的div中的图像？

编辑 - 展开代码：

$.fn.toggler = function(options) { 
    var o = $.extend({}, $.fn.toggler.defaults, options); 

    var $this = $(this); 
    $this.wrapInner('<a style="display:block; color: #fff; text-decoration: none;" href="#" title="Expand/Collapse" />'); 
    if (o.initShow) {$(o.initShow).addClass('shown');} 
    $this.next(o.cllpsEl + ':not(.shown)').hide(); 
    return this.each(function() { 
     var container; 
     (o.container) ? container = o.container : container = 'html'; 
     if ($this.next('div.shown').length) { $this.closest(container).find('.shown').show().prev().find('a').addClass('open'); } 
     $(this).click(function() { 



     $(function() { 
      $('.collapse img').attr('src', function(index, src) { 
      return this.getAttribute('data-src'); 
      }); 
     }); 



     $(this).find('a').toggleClass('open').end().next(o.cllpsEl)[o.method](o.speed); 
     return false; 
    }); 
});}; 

编辑2 - 如何在div得到扩大。对不起，这个网站还很新。应该有更多的信息。

这是在页面顶部的JavaScript：

<script type="text/javascript"> 
    $(function() { 
     $("span.expand").toggler({method: "toggle", speed: 0}); 
    }); 
    </script> 

是被点击扩大的div跨度：

<span class="expand">&nbsp;</span> 

跨度是建立在CSS来显示图像作为背景。

编辑：找到解决方案。

我放在：

$(this).find('a').toggleClass('open').end().next(o.cllpsEl)[o.method](o.speed); 

上方的显示图像的代码，以便它会触发它首先试图加载图像之前打开，并改变了负荷的形象代码：

$(function() { 
     $this.closest(container).find('.collapse:visible img').attr('src', function(index, src) { 
     return this.getAttribute('data-src'); 
     }); 
    }); 

谢谢大家：P

Answer 1

这是假设您正在处理您的扩展通过单击问题的div

$(".collapse").click(function() { 
    // code that handles expanding 
    // .... 

    $(this).children("img").attr('src', function(index, src) { 
     return this.getAttribute('data-src'); 
    }); 
}); 

Answer 2

您正在使用$()附加事件处理程序，它是“当文档准备就绪”的缩写，然后说“对每个.collapse img执行此操作”。没有任何暗示任何被“选择”的东西。现在，假设“选定”您的意思是“点击”。在这种情况下，你会想要做的事，如：

$(function() { 
    $('.collapse').click(function() { 
    $(this).children('img').attr('src', function(index, src) { 
    return this.getAttribute('data-src'); 
    }); 
    }); 
}); 

现在，每次被点击div.collapse运行的代码来设置图像的src。

（我猜这仍是不太你的意思，但它可能是更接近）

Answer 3

$.fn.toggler = function(options) { 
    var o = $.extend({}, $.fn.toggler.defaults, options); 

    var $this = $(this); 
    $this.wrapInner('<a style="display:block; color: #fff; text-decoration: none;" href="#" title="Expand/Collapse" />'); 
    if (o.initShow) {$(o.initShow).addClass('shown');} 
    $this.next(o.cllpsEl + ':not(.shown)').hide(); 
    return this.each(function() { 
     var container; 
     (o.container) ? container = o.container : container = 'html'; 
     if ($this.next('div.shown').length) { $this.closest(container).find('.shown').show().prev().find('a').addClass('open'); } 
     $(this).click(function() { 


      //right here `this` refers to the same this from above: `$(this).click(...` 
      $.each($(this).find('img'), function() { 

       //right here `this` refers to the current image, since we are looping over all the images 
       $(this).attr('src', $(this).attr('data-src')); 
      }); 


     $(this).find('a').toggleClass('open').end().next(o.cllpsEl)[o.method](o.speed); 
     return false; 
    }); 
});}; 

我假设this是.collapse元素之一，在这种情况下，我们发现在图像在单击的.collapse元素内，并且仅更改它的src属性。

请注意，您不需要代码中的$(function() {})（document.ready事件处理程序）。它应该用来像这样初始化插件。

Answer 4

展开时，您可以在扩展代码中使用$(this)关键字并获取当前展开的节点。

$(this).find('img').attr('src', function() { return $(this).data('src'); });