爲什麼我的點擊功能不斷添加CSS表單中的最後一個類？

Question

感謝這裏的一些用戶，我有一些jQuery允許我隨機附加一個類名到我的div中。我已經稍微改變了它，現在它可以工作，當我點擊一個單獨的div。我現在唯一的問題是，當我點擊它時，它會繼續將隨機div附加到我的.hexagon div。我真正想要它做的是刪除它，並從隨機列表中選擇另一個。以下是我有：

$(".click").click(function() { 
    var randomColors = ["ful","reg","emp"]; 
    $(".hexagon").each(function(index) { 
     var len = randomColors.length; 
     var randomNum = Math.floor(Math.random()*len); 
     $(this).addClass(randomColors[randomNum]); 
    }); 
}); 

如此。點擊添加FUL已註冊或EMP我.hexagon格，但我相信，因爲EMP是最後在我的CSS表我的所有div結束了這種風格。當我點擊我的按鈕時，我希望它將它們交換出去。有人能幫助我嗎？

這裏有一個的jsfiddle - http://jsfiddle.net/fv6zqu3t/

Answer 1

您需要添加新的隨機課前取出3個隨機類

$(".click").click(function() { 
 
var randomColors = ["ful","reg","emp"]; 
 
$(".hexagon").each(function(index) { 
 
    var len = randomColors.length; 
 
    var randomNum = Math.floor(Math.random()*len); 
 
    $(this).removeClass(randomColors.join(" ")).addClass(randomColors[randomNum]); 
 
}); 
 
});

.click { 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
    position: fixed; 
 
    padding: 10px; 
 
    background-color: #FFF; 
 
    margin: 10px; 
 
    z-index: 10; 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
.click:active { 
 
    background-color: #E8D1D1; 
 
} 
 

 
.hexagon { 
 
    position: relative; 
 
    width: 50px; 
 
    height: 28.87px; 
 
    margin: 14.43px 0; 
 
    background-color: #BF7C2A; 
 
} 
 

 
.hexagon:before, 
 
.hexagon:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0; 
 
    border-left: 25px solid transparent; 
 
    border-right: 25px solid transparent; 
 
} 
 

 
.hexagon:before { 
 
    bottom: 100%; 
 
    border-bottom: 14.43px solid #BF7C2A; 
 
} 
 

 
.hexagon:after { 
 
    top: 100%; 
 
    border-top: 14.43px solid #BF7C2A; 
 
    width: 0; 
 
} 
 

 
.ful { 
 
    background-color: #F2B33D; 
 
} 
 

 
.ful:before { 
 
    border-bottom: 14.43px solid #F2B33D; 
 
} 
 

 
.ful:after { 
 
    border-top: 14.43px solid #F2B33D; 
 
} 
 

 
.reg { 
 
    background-color: #BF7C2A; 
 
} 
 

 
.reg:before { 
 
    border-bottom: 14.43px solid #BF7C2A; 
 
} 
 

 
.reg:after { 
 
    border-top: 14.43px solid #BF7C2A; 
 
} 
 

 
.emp { 
 
    background-color: #403221; 
 
} 
 

 
.emp:before { 
 
    border-bottom: 14.43px solid #403221; 
 
} 
 

 
.emp:after { 
 
    border-top: 14.43px solid #403221; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span class="click">RANDOMISE</span> 
 

 
<div class="hexagon"></div> 
 
<div class="hexagon"></div> 
 
<div class="hexagon"></div> 
 
<div class="hexagon"></div> 
 
<div class="hexagon"></div> 
 
<div class="hexagon"></div> 
 
<div class="hexagon"></div> 
 
<div class="hexagon"></div> 
 
<div class="hexagon"></div> 
 
<div class="hexagon"></div>

$(this).removeClass(randomColors.join(" "))這將嘗試刪除任何你在randomColors列出的類數組，那麼你可以安全地添加你的新類。

你的假設是正確的，emp是最後一節課讓你的樣式將顯示，在別人，但這不是問題

Answer 2

加入.removeClass(randomColors.join(' '))增加之前，取出類，如下圖所示：

$(".click").click(function() { 
 
    var randomColors = ["ful","reg","emp"]; 
 
    $(".hexagon").removeClass(randomColors.join(' ')).each(function(index) { 
 
     var len = randomColors.length; 
 
     var randomNum = Math.floor(Math.random()*len); 
 
     $(this).addClass(randomColors[randomNum]); 
 
     alert(randomColors[randomNum]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="click">Click</div> 
 
<div class="hexagon">Hexagon</div> 
 
<div class="hexagon">Hexagon</div> 
 
<div class="hexagon">Hexagon</div> 
 
<div class="hexagon">Hexagon</div> 
 
<div class="hexagon">Hexagon</div>

Answer 3

從我已閱讀，你想切換樹類的值是隨機的。 jQuery函數.addClass（）爲所選元素添加類名稱。因此，在設置新值之前，您需要刪除舊值。

$(this).removeClass(randomColors.join(" ")).addClass(randomColors[randomNum]); 

Answer 4

你可以使用$（本）.removeClass（）;刪除類，然後添加新

$(".click").click(function() { 
 
    var randomColors = ["ful","reg","emp"]; 
 
    $(".hexagon").each(function(index) { 
 
     var len = randomColors.length; 
 
     var randomNum = Math.floor(Math.random()*len); 
 
     $(this).removeClass(); 
 
     $(this).addClass("hexagon"); 
 
     $(this).addClass(randomColors[randomNum]); 
 
     alert(randomColors[randomNum]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="click">Click</div> 
 
<div class="hexagon">Hexagon</div> 
 
<div class="hexagon">Hexagon</div> 
 
<div class="hexagon">Hexagon</div> 
 
<div class="hexagon">Hexagon</div> 
 
<div class="hexagon">Hexagon</div>