Question

我试图根据span标签中的内容在表格中使用超棒的图标。如果span标签中的内容包含“已列出”，则它将具有一种图标；如果它具有“ not_listed”，则另一个。

我已经对span标签的内容进行了硬编码，因为我将从API中获取这些内容。 API始终以列出或未列出来响应。这是为什么我不能在HTML内使用图标标记，而是通过Javascript发送它的另一个原因。

第一个span标签将内容更改为图标，而其余的则没有。请检查下面我尝试过的代码。

A.index(a)

var blStatus = document.querySelector(".bl-status");
if (blStatus === "listed") {
  blStatus.innerHTML = '<i class="far fa-times-circle"></i>';
} else {
  blStatus.innerHTML = '<i class="far fa-check-circle"></i>';
}

Answer 1

document.querySelector仅返回第一个匹配元素。因此，您需要使用querySelectorAll。

还需要将blStatus === "listed"替换为blStatus.innerText === "listed"

Array.from(document.querySelectorAll(".bl-status")).forEach(blStatus => {
  if (blStatus.innerText === "listed") {
    blStatus.innerHTML = '<i class="far fa-times-circle"></i>';
  } else {
    blStatus.innerHTML = '<i class="far fa-check-circle"></i>';
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">


<table>
  <tbody>
    <tr>
      <td><span class="bl-status">listed</span> Apple</td>
    </tr>
    <tr>
      <td><span class="bl-status">not_listed</span> Guava</td>
    </tr>
    <tr>
      <td><span class="bl-status">not_listed</span> Banana</td>
    </tr>
    <tr>
      <td><span class="bl-status">listed</span> Grape</td>
    </tr>
    <tr>
      <td><span class="bl-status">not_listed</span> Orange</td>
    </tr>
    <tr>
      <td><span class="bl-status">listed</span> Mango</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

根据您的评论

_{嗨Sagar，希望您一切都好。如果这对您来说不是问题，我还需要其他帮助。您为我提供帮助的JS代码，是否可以对其进行一些修改，以便它还列出列出的数量和未列出的数量？我在if语句中尝试了bl-status.innerText.length，但它只返回一项。提前致谢。 – Zak 2小时前}

这是经过编辑的代码段。

let count = {"listed" : 0, "unlisted": 0};
Array.from(document.querySelectorAll(".bl-status")).forEach(blStatus => {
  if (blStatus.innerText === "listed") {
    count.listed += 1;
    blStatus.innerHTML = '<i class="far fa-times-circle"></i>';
  } else {
    count.unlisted += 1;
    blStatus.innerHTML = '<i class="far fa-check-circle"></i>';
  }
});
console.log(count);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">


<table>
  <tbody>
    <tr>
      <td><span class="bl-status">listed</span> Apple</td>
    </tr>
    <tr>
      <td><span class="bl-status">not_listed</span> Guava</td>
    </tr>
    <tr>
      <td><span class="bl-status">not_listed</span> Banana</td>
    </tr>
    <tr>
      <td><span class="bl-status">listed</span> Grape</td>
    </tr>
    <tr>
      <td><span class="bl-status">not_listed</span> Orange</td>
    </tr>
    <tr>
      <td><span class="bl-status">listed</span> Mango</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

字体真棒图标仅在Javascript中使用过后才能在一个td中工作

1 个答案: