javascript - 找到 div 后如何在 javascript/jquery 中设置 img 标签的样式？

Question

我正在一个 wordpress/php 网站上工作，在 javascript/jquery 中找到一个 div 后，我想在其中设置一个 img 标签的样式。

需要发生事情的 HTML 代码是:

<div class="page-hero page-hero--reports cf">
   <figure class="page-hero__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
      <img src="">       // where opacity:0.7 needs to be apllied.  
   </figure>
   <div class="page-hero__content-contain">
      <h2 class="page-hero__title-top page-hero__title--heavy">Trans Mountain Pipeline: NEB Releases New Report, Recommends Approval </h2>
      <h2 class="page-hero__title-bottom page-hero__title--heavy"> More Coverage</h2>
   </div>
</div>

这是我尝试过的方法，但它不起作用。

$(".page-hero--reports").each(function () {
    if ($(this).find(".page-hero__title-top").not(":empty").length > 0 && $(this).find(".page-hero__title-bottom").not(":empty").length > 0) {
        $(this).find(".img-fit img").css("opacity", "0.7");
    } 
});

问题陈述:

我想知道我需要在上面的脚本中进行哪些更改，以便它在页面加载时对 img 标记应用样式。

Answer 1

您使用 .each 有什么原因吗？

怎么样:

// find elements
$(".page-hero--reports img").css("opacity", "0.2");

像这样:

// find elements
$(".page-hero--reports img").css("opacity", "0.2");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-hero page-hero--reports cf">
   <figure class="page-hero__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
      <img src="https://cdn.cnn.com/cnnnext/dam/assets/190311171619-sarah-sanders-0311-medium-tease.jpg">
   </figure>
   <div class="page-hero__content-contain">
      <h2 class="page-hero__title-top page-hero__title--heavy">Trans Mountain Pipeline: NEB Releases New Report, Recommends Approval </h2>
      <h2 class="page-hero__title-bottom page-hero__title--heavy"> More Coverage</h2>
   </div>
</div>