时间戳

首页 > 解决方案 > 对 ul li 中的所有元素执行相同的操作

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

问题描述

我有一个无序列表，其中每个列表项都有一个跨度，其中有一张图片。我正在尝试将其内部 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>

标签： javascripthtmljquerycsshtml-lists

解决方案

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

推荐阅读