Question

我一直试图摆脱某些ul下某些图片的延迟加载功能，所以我在jquery之后写了这个

$("ul.wpmenucart").each(function() {
    $('img.attachment-shop_thumbnail').attr("src", $('img.attachment-shop_thumbnail').attr('data-src'));
    $('img.attachment-shop_thumbnail').removeAttr('data-src');
    $( "img.attachment-shop_thumbnail" ).removeAttr('data-lazy-type');
    $( "img.attachment-shop_thumbnail" ).removeClass('lazy-hidden');
});

但它没有像我预期的那样工作。它正在做的是 - 假设我在那个ul＆amp; amp; li标签及其仅用img src tqag替换第一张图片的data-src标记值。

E.g。让我们说在ul标签下运行jquery之前的第一个图像网址是这样的

<ul class="wpmenucart">
<li><img class="attachment-shop_thumbnail" src="something" data-src="http://example.com/1.jpg" /></li>
<li><img class="attachment-shop_thumbnail" src="something" data-src="http://example.com/2.jpg" /></li>
</ul>

运行上面的jquery之后就变成了

<ul class="wpmenucart">
<li><img class="attachment-shop_thumbnail" src="http://example.com/1.jpg" /></li>
<li><img class="attachment-shop_thumbnail" src="http://example.com/1.jpg" /></li>
</ul>

现在任何人都可以告诉我我的jquery做错了什么？提前谢谢。

Answer 1

我认为错误的是您正在为每个ul运行该函数，而不是针对每个特定li项运行该函数，因此您无法指示哪个li项目从中获取信息。

您需要的是，在为每个ul制作循环之后，为每个li项创建另一个循环，例如：

$("ul.wpmenucart").each(function() {
    $(this).find('li').each(function(){
        var img = $(this).find('img');
        img.attr("src", $('img.attachment-shop_thumbnail').attr('data-src'));
        img.removeAttr('data-src');
        img.removeAttr('data-lazy-type');
        img.removeClass('lazy-hidden');
    });  
});

看看是否有帮助。祝好运。

Answer 2

$("ul.wpmenucart")选择一个元素<ul>，这可能不是您想要的。然后，在each函数中，选择整个文档中的所有img.attachment-shop_thumbnail元素，这些元素也可能是错误的。

你想要这样的东西：

$("ul.wpmenucart > li img").each(function() {
  var $el = $(this);
  $el.attr("src", $el.attr('data-src'));
  $el.removeAttr('data-src');
  $el.removeAttr('data-lazy-type');
  $el.removeClass('lazy-hidden');
});

注意新的选择器以及在this函数中使用each而不是创建第二个选择器。

Answer 3

试试这个。它将使用类img遍历每个attachment-shop_thumbnail并设置/删除属性。

$("ul.wpmenucart").each(function() {
    $('img.attachment-shop_thumbnail').each(function()
    {
      $(this).attr("src", $(this).attr('data-src'));
      $(this).removeAttr('data-src');
      $(this).removeAttr('data-lazy-type');
      $(this).removeClass('lazy-hidden');
    });    
});

更好的方法：

$("ul.wpmenucart img.attachment-shop_thumbnail").each(function() {
          $(this).attr("src", $(this).attr('data-src'));
          $(this).removeAttr('data-src');
          $(this).removeAttr('data-lazy-type');
          $(this).removeClass('lazy-hidden');
        });

jQuery在某些ul＆amp; s下的所有图像的每个函数。 li标签

3 个答案: