在页面加载时扫描某些类元素的值并仅对具有某些值的几个元素运行函数

Question

我正在尝试在页面加载时创建图像审查功能。

1. 页面加载时扫描某些类元素的值
2. 如果多个元素的值超过 5
3. 将 img src 更改为大于 5 的值计数

我想我在阅读 stackoverflow 中的其他问题后知道如何扫描和更改，但我不能只更改特定问题。

据我了解，下面的代码会在扫描单个 6 时审查所有图像

例如： HTML

<div class="auto-listed-box">
<img class="showing-image" src="normal_image.jpg"><p class="report-count">0</p>
</div>

<div class="auto-listed-box">
<img class="showing-image" src="naked_image.jpg"><p class="report-count">6</p>
</div>

<div class="auto-listed-box">
<img class="showing-image" src="normal_image.jpg"><p class="report-count">0</p>
</div>

javascript

$(document).ready(function () {
   var count = $('.report-count').val();
   if (count > 5 ) { 
     $('.showing-image').attr('src', 'censored.jgp');
   }
});

请帮忙

Answer 1

您可以为此使用filter()：

$(document).ready(function () {
  $('.report-count')
    .filter((i, node) => +node.textContent > 5)
    .prev()
    .attr("src", 'censored.jpg');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="auto-listed-box">
<img class="showing-image" src="normal_image.jpg"><p class="report-count">0</p>
</div>

<div class="auto-listed-box">
<img class="showing-image" src="naked_image.jpg"><p class="report-count">6</p>
</div>

<div class="auto-listed-box">
<img class="showing-image" src="normal_image.jpg"><p class="report-count">0</p>
</div>

同样的事情，但使用 vanilla javascript（又名更快）：

document.addEventListener("DOMContentLoaded", e =>
{
  const report = document.querySelectorAll(".report-count");
  for(let i = 0; i < report.length; i++)
  {
    if (+report[i].textContent > 5)
    {
      report[i].previousSibling.src = 'censored.jpg';
 /* use this line instead if img and p.report-count are not next to each other, but they have common parent */
      //report[i].parentNode.querySelector("img.showing-image").src = 'censored.jgp';
    }
  }
});

<div class="auto-listed-box">
<img class="showing-image" src="normal_image.jpg"><p class="report-count">0</p>
</div>

<div class="auto-listed-box">
<img class="showing-image" src="naked_image.jpg"><p class="report-count">6</p>
</div>

<div class="auto-listed-box">
<img class="showing-image" src="normal_image.jpg"><p class="report-count">0</p>
</div>

如果 img 和 .report-count 不是兄弟姐妹：

document.addEventListener("DOMContentLoaded", () =>
{
  const box = document.querySelectorAll(".auto-listed-box");
  for(let i = 0; i < box.length; i++)
  {
    if (+box[i].querySelector(".report-count").textContent > 5)
    {
      box[i].querySelector("img.showing-image").src = 'censored.jpg';
    }
  }
});

<div class="auto-listed-box">
<img class="showing-image" src="normal_image.jpg"><p class="report-count">0</p>
</div>

<div class="auto-listed-box">
<img class="showing-image" src="naked_image.jpg"><p class="report-count">6</p>
</div>

<div class="auto-listed-box">
<img class="showing-image" src="normal_image.jpg"><p class="report-count">0</p>
</div>