如何使用 jquery 在类之间切换

Question

我的页面中有一颗评级星，我正在尝试在“fa fa-star”class 和“fa fa-star checked”class 之间来回切换？ 这是我的实现（没用）

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <span onclick="rating" class="fa fa-star"></span> <span onclick="rating" class="fa fa-star checked"></span> <span onclick="rating" class="fa fa-star checked"></span> <span onclick="rating" class="fa fa-star checked"></span> <span onclick="rating" class="fa fa-star"></span> </div>

Answer 1

您只需切换checked的 class 即可获得简化评级。

 $('.stars i').click(function() { $('.stars i.checked').removeClass('checked'); for (let i = 0; i < $(this).index() + 2; i++) { $('.stars i:nth-of-type(' + i + ')').addClass('checked'); } });

 .stars i { color: #ccc; cursor: pointer; }.stars i.checked { color: #dfd022; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="stars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> </div>

如果您需要能够将星星转换回“0”的选项，您可以使用以下选项：

 $('.stars i').click(function() { if($(this).index() === 0 && $('.stars i.checked').length === 1){ $('.stars i.checked').removeClass('checked'); } else { $('.stars i.checked').removeClass('checked'); for (let i = 0; i < $(this).index() + 2; i++) { $('.stars i:nth-of-type(' + i + ')').addClass('checked'); } } });

 .stars i { color: #ccc; cursor: pointer; }.stars i.checked { color: #dfd022; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="stars"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> </div>

Answer 2

也许那个...

 document.querySelectorAll('i.fa-star').forEach( (star,indx,arr) => { star.onclick =_=> { let chk = star.classList.toggle('checked') arr.forEach((s,i) => s.classList.toggle('checked', i<indx? true: i===indx? chk: false)) } })

 body { background: darkslategrey; font-size: 24px; } i.fa-solid.fa-star { color: lightgray; cursor: pointer; } i.fa-solid.fa-star.checked { color: gold; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" /> <div> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> </div>

如果你想要和 prettyInPink 的答案一样：

 document.querySelectorAll('i.fa-star').forEach( (star,indx,arr) => star.onclick =_=> arr.forEach((s,i) => s.classList.toggle('checked', i<=indx )))

 body { background: darkslategrey; font-size: 24px; } i.fa-solid.fa-star { color: lightgray; cursor: pointer; } i.fa-solid.fa-star.checked { color: gold; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" /> <div> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-star"></i> </div>