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

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

4 个答案: