对 ul li 中的所有元素执行相同的操作

Question

我有一个无序列表，其中每个列表项都有一个跨度，其中有一张图片。我试图将每个跨度的背景图像设置为它们内部 img 块包含的图像，然后将该图像块的不透明度设置为 0。

这是我写的代码。问题是这似乎无法正常工作，即使我对设置背景图像的行进行注释，我仍然可以看到图片，但我不应该看到，因为 img 块的不透明度设置为 0 . 这让我觉得代码没有正确设置背景图像。

你能帮我理解我做错了什么吗？谢谢！

var myUl = $('.my-ul');
  
    [...myUl.children].forEach(childLi => {
        const span_list = childLi.querySelector('span');
        const img_list = childLi.querySelector('img');
        var path_picture = img_list.src;
        $(span_list).css("background-image", "url(${path_picture})");
        $(span_list).css("background-size", "contain");
        img_list.style.opacity = 0;
  });

 .my-ul li span {
    display: block;
    width: 200px;
    height: 200px;
  }

  .my-ul li img {
    width: 100%;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="my-ul">
  <li>
    <span>
      <img src="https://www.trudellanimalhealth.com/sites/default/files/documents/tmdi-cat-athma-concern_2x.png" />
    </span>
  </li>
  <li>
    <span>
      <img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" />
    </span>
  </li>
  <li>
    <span>
      <img src="https://undark.org/wp-content/uploads/2020/02/GettyImages-1199242002-1-scaled.jpg" />
    </span>
  </li>
</ul>

Answer 1

不确定您如何处理 vanilla js 或 jquery 中更改样式的方式，但这 img_list.style.opacity = 0; 可能是错误的。也许 img_list 是一组 elements/nodes 所以它不会起作用？

Answer 2

有两个问题：

$(".myul") returns 一个 jquery 集合，作为一个 .children() 函数（不是属性）但这不是一个数组，所以可以不使用 [...].forEach
"url(${path_picture})" 看起来像使用字符串插值，所以需要使用反引号 ` 而不是引号 "

给予：

//var myUl = $('.my-ul');
var myUl = document.querySelector(".my-ul");

[...myUl.children].forEach(childLi => {
  const span_list = childLi.querySelector('span');
  const img_list = childLi.querySelector('img');
  var path_picture = img_list.src;
  $(span_list).css("background-image", `url(${path_picture})`);
  $(span_list).css("background-size", "contain");
  img_list.style.opacity = 0;
});

.my-ul li span {
  display: block;
  width: 200px;
  height: 200px;
}

.my-ul li img {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="my-ul">
  <li>
    <span>
      <img src="https://www.trudellanimalhealth.com/sites/default/files/documents/tmdi-cat-athma-concern_2x.png" />
    </span>
  </li>
  <li>
    <span>
      <img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" />
    </span>
  </li>
  <li>
    <span>
      <img src="https://undark.org/wp-content/uploads/2020/02/GettyImages-1199242002-1-scaled.jpg" />
    </span>
  </li>
</ul>

替代方法是使用 jquery

var myUl = $('.my-ul');

myUl.children().each((i, e) => {
  var path_picture = $("img", e).attr("src");
  $("span", e)
      .css("background-image", `url(${path_picture})`)
      .css("background-size", "contain");
  $("img", e).hide();
});

.my-ul li span {
  display: block;
  width: 200px;
  height: 200px;
}

.my-ul li img {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="my-ul">
  <li>
    <span>
      <img src="https://www.trudellanimalhealth.com/sites/default/files/documents/tmdi-cat-athma-concern_2x.png" />
    </span>
  </li>
  <li>
    <span>
      <img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" />
    </span>
  </li>
  <li>
    <span>
      <img src="https://undark.org/wp-content/uploads/2020/02/GettyImages-1199242002-1-scaled.jpg" />
    </span>
  </li>
</ul>

对 ul li 中的所有元素执行相同的操作

make same actions for all elements inside ul li

html

javascript

css

jquery

html-lists