更新单个 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：

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