Javascript 我希望能够切换填充星图标（fas fa star）和未填充星图标（far fa star）

HTML:

<ul>
  <li>
    item1
    <i class="far fa-star" onClick="star(this)"></i>
  </li>
  <li>
    item2
    <i class="fas fa-star" onClick="star(this)"></i>
  </li>
  <li>
    item3
    <i class="far fa-star" onClick="star(this)"></i>
  </li>
  <li>
    item4
    <i class="fas fa-star" onClick="star(this)"></i>
  </li>
</ul>

我试过：

function star(recevingStarInfo){
        $(this).hasClass("fas")? recevingStarInfo.classList.toggle("far"): recevingStarInfo.classList.toggle("fas");
      

但每当我点击填充星（fas-fa-star）时，它就会被未填充的正方形所取代。我还尝试使用

.removeClass（“”）

和

.addClass（“”）

以及

.toggleClass（'far fas'）

没有任何效果

仅供参考，我不能在列表中使用id，因为我在列表之外的代码的其他部分使用了填充和未填充的星号

如果到目前为止我的描述还不清楚，我希望能够点击星号图标并将其从“已填充”更改为“未填充”，反之亦然

---

请随意使用jQuery或vanilla js，我只是在学习js，如果可能的话，可以使用简单的代码来解决我的问题。

您可以使用

toggleClass（）

来替换元素上的类

function star(recevingStarInfo){
    $(this).hasClass("fas")?"": recevingStarInfo.classList.toggle("fas");
    $(this).hasClass("far")?"": recevingStarInfo.classList.toggle("far);
}

功能星形（图标）{
$（icon.toggleClass（'fas far'）；
}

.far{背景色：红色；}
.fas{背景色：蓝色；}
.far，.fas{
显示：内联块；
宽度：10px；
高度：10px；
}

项目1


项目2


项目3


项目4

希望它能帮助：

$（'.fa star'）。单击（函数（）{
$（this.toggleClass（'fas far'）；
})

标题


项目1


项目2


项目3


项目4

$（'.fa star'）。单击（函数（）{
$（this.toggleClass（'fas far'）；
})

旁注，如果您正在使用

classList.toggle（）

方法，那么您最好使用

classList.contains（）

方法作为三元组，同时避免内部逻辑中的jQuery。否则，你只是奇怪地混合了方法论。我下面的代码片段有助于解决您的问题吗？