Font awesome 图标只有在 Javascript 使用后才能在一个 td 中使用

Question

我正在尝试根据 span 标签中的内容在 table 中使用超棒的字体图标。如果 span 标签中的内容包含 "listed" 则它将具有一种图标；如果它有 "not_listed" 那么另一个。

我已经对 span 标签内容进行了硬编码，因为我将从 API 中获取这些内容。 API 总是用 listed 或 not_listed 响应。这是我不能在 HTML 中使用图标标签的另一个原因，所以我通过 Javascript.

发送它

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

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>';
}

<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>

Answer 1

document.querySelector returns 只匹配第一个元素。所以你需要使用 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>

根据您的评论

_{Hi Sagar, hope you're doing well. I needed another help if that's not a problem for you. The JS code you helped me with, can it be modified a little so that it also says how many are listed and how many are not listed? I tried bl-status.innerText.length in the if statement but it just returns one item. Thanks in advance. – Zak 2 hours ago}

这是编辑后的片段。

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>

Font awesome 图标只有在 Javascript 使用后才能在一个 td 中使用

Font awesome icon works in one td only after using it from Javascript

javascript

font-awesome