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]);
    });
});

所以.click为我的.hexagon div添加了ful reg或emp，但我认为因为emp在我的CSS表格中是最后一个，所有我的div都以这种风格结束。我想让它在我点击我的按钮时将它们换掉。有谁可以帮助我吗？

这是一个jsfiddle - http://jsfiddle.net/fv6zqu3t/

Answer 1

在添加新的随机类

之前，您需要删除3个随机类

＆＃13;

$(".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]);
});
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

$(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

您可以使用 $（this）.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>

为什么我的click函数会不断添加css表中的最后一个类？

4 个答案: