Значок Font Awesome работает в один тд только после использования его из Javascript - PullRequest
Новая
       8

Значок Font Awesome работает в один тд только после использования его из Javascript

2 голосов
/ 25 октября 2019

Я пытаюсь использовать потрясающие шрифты иконки в таблице в соответствии с содержимым тега span. Если содержимое в теге span содержит «перечисленные», оно будет иметь один тип значков;если он "not_listed", то другой.

Я жестко запрограммировал содержимое тега span, потому что собираюсь получить его из API. API всегда отвечает перечисленным или 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>

1 Ответ

2 голосов
/ 25 октября 2019

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>

На основании вашего комментария

Привет, Сагар, надеюсь, у тебя все хорошо. Мне нужна еще одна помощь, если это не проблема для вас. Код JS, с которым вы мне помогли, можно ли немного изменить, чтобы он также указывал, сколько перечислено, а сколько нет? Я пробовал bl-status.innerText.length в операторе if, но он просто возвращает один элемент. Заранее спасибо. - Зак 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>
...