php - 如何使用 jQuery 将不同的 FontAwesome 图标填充到 WordPress 类别列表中？

Question

我有以下 WordPress 类别列表:

<ul class="fruits">
 <li class="fruit-cat fruit-cat-apple"><a href="#">
  <div>FA Apple Icon</div>
  <div>Apple</div>
 </a></li>
 <li class="fruit-cat fruit-cat-mango"><a href="#">
  <div>FA Mango Icon</div>
  <div>Mango</div>
 </a></li>
 <li class="fruit-cat fruit-cat-grape"><a href="#">
  <div>FA Grape Icon</div>
  <div>Grape</div>
 </a></li>
</ul>

我使用了下面的 WP Query获取上面的列表:

$terms = get_terms('category', 'orderby=name');
 foreach ($terms as $term) :
  $termLink = get_term_link($term);
   echo '<ul>';
   echo '<li class="fruit-cat fruit-cat-' . $term->slug . '"><a href=' . esc_url($termLink) . '>
   <div><i class="fa fa-2x fa-user-circle-o" aria-hidden="true"></i></div>
   <div class="ml-2"><b>' . $term->name . '</b></div>
  </a></li>';
  echo '</ul>'
 endforeach;

我正在创建两个 <div>在每个 <li> 中并且，每个 <li>有它的category-slug作为类名。 我的 WordPress 中有 20 多个类别的列表。

我想放置不同的FontAwesome图标按照第一个类别 <div> .
因为，每个 <li>有自己的类(class)或可以有 ID，如何更改 FontAwesome根据类别标记/类，使用 jQuery？

Answer 1

我自己用switch函数解决了这个问题:
我的 WP 查询 现在看起来像这样:

$terms = get_terms('category', 'orderby=name');
 foreach ($terms as $term) :
  $termLink = get_term_link($term);
  switch ($term->slug) {
   case 'apple':
    $icon = 'cutlery';
    break;
   case 'mango':
    $icon = 'smile-o';
    break;
   case 'grape':
    $icon = 'frown-o';
    break;
    }
   echo '<ul>';
   echo '<li class="fruit-cat fruit-cat-' . $term->slug . '"><a href=' . esc_url($termLink) . '>
   <div><i class="fa fa-2x fa-'.$icon.'" aria-hidden="true"></i></div>
   <div class="ml-2"><b>' . $term->name . '</b></div>
  </a></li>';
  echo '</ul>'
 endforeach;

现在，我用上面的代码生成了这个 HTML:

<ul class="fruits">
 <li class="fruit-cat fruit-cat-cutlery"><a href="#">
  <div><i class="fa fa-cutlery" aria-hidden="true"></i></div>
  <div>Apple</div>
 </a></li>
 <li class="fruit-cat fruit-cat-mango"><a href="#">
  <div><i class="fa fa-smile-o" aria-hidden="true"></i></div>
  <div>Mango</div>
 </a></li>
 <li class="fruit-cat fruit-cat-grape"><a href="#">
  <div><i class="fa fa-frown-o" aria-hidden="true"></i></div>
  <div>Grape</div>
 </a></li>
</ul>