[英]Unable to remove/toggle class of element back to `is-inactive`
選擇曲棍球運動員后,將其默認的is-inactive
類切換為is-active
。 我還添加了一個full
的類別,以防止選擇具有picked.is-inactive
類別的玩家。
一旦出現最大數量的玩家(四個守門員中的兩個,十五個防守員中的六個和三十一個前鋒中的十二個),我將無法再次單擊某個級別為picked.is-active
的玩家。類別已達到,以便“取消選擇”一個玩家並將其類別切換回默認is-inactive
,然后選擇另一個玩家。
為了解決這個問題,我覺得我需要一個.removeClass()和函數中的if-else語句嗎?
/*-------------------------------------
COUNT SELECTED
--------------------------------------*/
function countSelected() {
$(".player").on("click", function(){
// Checks if the maximum number of players have been selected
// If so, return false and then do nothing
// If not, the class will toggle from `is-inactive` to `is-active`
if ($(this).find(".picked.full").length > 0) return false;
$(this).find(".picked").toggleClass("is-inactive is-active");
// Count the number of players with stars
var starredGoaltenders = $(".player--goalie").find(".picked.is-active").length;
var starredDefencemen = $(".player--defencemen").find(".picked.is-active").length;
var starredForwards = $(".player--forward").find(".picked.is-active").length;
console.log(starredGoaltenders, starredDefencemen, starredForwards);
// The number of starred players for each position cannot exceed the following numbers
var maxGoaltenders = 2;
var maxDefencemen = 6;
var maxFowards = 12;
// If the number of starred players hits its max, a class of `is-completed` is adding to the corresponding checkmark to indicate that the task has been completed
if (starredGoaltenders === maxGoaltenders) {
$(".checkmark--goalie").addClass("is-completed");
$(".player--goalie").find(".picked").addClass("full");
}
if (starredDefencemen === maxDefencemen) {
$(".checkmark--defencemen").addClass("is-completed");
$(".player--defencemen").find(".picked").addClass("full");
}
if (starredForwards === maxFowards) {
$(".checkmark--forward").addClass("is-completed");
$(".player--forward").find(".picked").addClass("full");
}
// If all the conditions are met show the submit vote button
if (starredGoaltenders === maxGoaltenders && starredDefencemen === maxDefencemen && starredForwards === maxFowards) {
$(".btn--submit").show();
$(".btn--submit").addClass("slideLeft");
}
});
} countSelected();
<div class="player player--goalie year--1970">
<div class="tooltip tooltip--tall">
<p class="tooltip__name">Glen Hanlon</p>
<p class="tooltip__hometown"><span>Hometown:</span> Brandon, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 1974-1977</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number--games">172</p>
</div>
<div class="stats__group stats--goalsag">
<p class="stats__header">GA</p>
<p class="stats__number">4.22</p>
<p class="stats__number">3.99</p>
<p class="stats__number stats__number--goalsag">3.09</p>
</div>
<div class="stats__group stats--savep">
<p class="stats__header">SAV%</p>
<p class="stats__number">.892</p>
<p class="stats__number">.891</p>
<p class="stats__number stats__number--savep">.906</p>
</div>
<div class="stats__group stats--shutouts">
<p class="stats__header">SO</p>
<p class="stats__number">0</p>
<p class="stats__number stats__number--shutouts">4</p>
<p class="stats__number">4</p>
</div>
</div> <!-- tooltip__stats--inline -->
</div> <!-- tooltip -->
<div class="player__headshot player--hanlon">
<div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
</div>
<p class="player__name">Glen Hanlon</p>
<p class="player__position">Goalie</p>
</div>
當類full
時,您正在執行return false
,但是當選擇數full
時,您不會將其刪除。
嘗試像這樣return false
:
if ($(this).find(".picked.is-inactive.full").length > 0) return false;
和做else
至removeClass
這樣
$(".player--goalie").find(".picked").removeClass("full");
您需要從播放器中刪除“已完成”和“已滿”類,並隱藏“提交”按鈕:
/*------------------------------------- COUNT SELECTED --------------------------------------*/ function countSelected() { $(".player").on("click", function(){ // Checks if the maximum number of players have been selected // If so, return false and then do nothing // If not, the class will toggle from `is-inactive` to `is-active` if ($(this).find(".picked.full").length > 0) return false; $(this).find(".picked").toggleClass("is-inactive is-active"); // Count the number of players with stars var starredGoaltenders = $(".player--goalie").find(".picked.is-active").length; var starredDefencemen = $(".player--defencemen").find(".picked.is-active").length; var starredForwards = $(".player--forward").find(".picked.is-active").length; console.log(starredGoaltenders, starredDefencemen, starredForwards); // The number of starred players for each position cannot exceed the following numbers var maxGoaltenders = 2; var maxDefencemen = 6; var maxFowards = 12; // If the number of starred players hits its max, a class of `is-completed` is adding to the corresponding checkmark to indicate that the task has been completed if (starredGoaltenders === maxGoaltenders) { $(".checkmark--goalie").addClass("is-completed"); $(".player--goalie").find(".picked").addClass("full"); }else{ $(".checkmark--goalie").removeClass("is-completed"); $(".player--goalie").find(".picked").removeClass("full"); } if (starredDefencemen === maxDefencemen) { $(".checkmark--defencemen").addClass("is-completed"); $(".player--defencemen").find(".picked").addClass("full"); }else{ $(".checkmark--defencemen").removeClass("is-completed"); $(".player--defencemen").find(".picked").removeClass("full"); } if (starredForwards === maxFowards) { $(".checkmark--forward").addClass("is-completed"); $(".player--forward").find(".picked").addClass("full"); }else{ $(".checkmark--forward").removeClass("is-completed"); $(".player--forward").find(".picked").removeClass("full"); } // If all the conditions are met show the submit vote button if (starredGoaltenders === maxGoaltenders && starredDefencemen === maxDefencemen && starredForwards === maxFowards) { $(".btn--submit").show(); $(".btn--submit").addClass("slideLeft"); }else{ $(".btn--submit").removeClass("slideLeft"); $(".btn--submit").hide(); } }); } countSelected();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.