Question

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>

javascript：

此js可以运行，但正如每个人都可以看到的那样，这看起来很荒谬，而且感觉不是解决我的问题的最佳方法。

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

我尝试过：

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，如果可能的话，请使用简单的代码来解决我的问题。

Answer 1

希望这会有所帮助：

$('.fa-star').click(function() {
  $(this).toggleClass('fas far');
})

<!doctype html>
<html>

<head>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta charset="UTF-8">
  <title>Title</title>

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="css/bootstrap.min.css" rel="stylesheet" />
  <link href="css/reset.css" rel="stylesheet" />
  <link href="css/custom.css" rel="stylesheet" />
  <link href="images/favicon" type="image/png" rel="icon">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="js/respond.js"></script>
</head>




<body>

  <ul>
    <li>
      item1
      <i class="fas fa-star"></i>
    </li>
    <li>
      item2
      <i class="far fa-star"></i>
    </li>
    <li>
      item3
      <i class="fas fa-star"></i>
    </li>
    <li>
      item4
      <i class="far fa-star"></i>
    </li>
  </ul>




</body>




</html>

Answer 2

$('.fa-star').click(function() {
  $(this).toggleClass('fas far');
})

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<i class="far fa-star"></i>

Answer 3

您可以使用toggleClass()来替换元素上的类。

function star ( icon ) {
  $(icon).toggleClass('fas far');
}

.far { background-color: red; }
.fas { background-color: blue; }

.far, .fas {
  display: inline-block;
  width: 10px;
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

我希望能够将实心星形图标（fas fa-star）与未实心星形图标（far fa-star）切换

3 个答案: