为什么我的点击功能不断添加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>