javascript - 使用 .addclass 函数制作骰子滚筒不起作用

Question

我希望 id=die 首先加载，然后点击“click me”按钮加载 CSS 中设计的指定类，如 'die1' 'die2' 等等

function roll() {
  var die = Math.floor(Math.random() * 6);
  if (die == 1)
    $('#die').addClass('die1');
  else if (die == 2)
    $('#die').addClass('die2');
  else if (die == 3)
    $('#die').addClass('die3');
  else if (die == 4)
    $('#die').addClass('die4');
  else if (die == 5)
    $('#die').addClass('die5');
  else
    $('#die').addClass('die6');
}

#die {
  width: 300px;
  border: 5px solid black;
  padding: 25px;
  margin: 25px;
}

.die1 {
  width: 300px;
  border: 5px solid green;
  padding: 25px;
  margin: 25px;
}

.die2 {
  width: 300px;
  border: 5px solid pink;
  padding: 25px;
  margin: 25px;
}

.die3 {
  width: 300px;
  border: 5px solid violet;
  padding: 25px;
  margin: 25px;
}

.die4 {
  width: 300px;
  border: 5px solid yellow;
  padding: 25px;
  margin: 25px;
}

.die5 {
  width: 300px;
  border: 5px solid red;
  padding: 25px;
  margin: 25px;
}

.die6 {
  width: 300px;
  border: 5px solid blue;
  padding: 25px;
  margin: 25px;
}

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

<div id="die"></div>
<button onclick="roll()">Click me!</button>

不知道为什么不调用需要的类？当我尝试在 js 中打印变量“die”时，它工作正常。

Answer 1

您的 CSS 规则应该更具体，因为标识符比类更具体，例如:

#die.die1 {
#die.die2 {
...

那么你的 JS 函数可能就像这样:

$('#die').removeAttr('class').addClass('die' + die);

删除之前的类并添加新的类。

注意:您可能需要将最小值作为 1 添加到随机数中，因为您没有 die0 类:

var die = Math.floor(Math.random() * 6) + 1;

function roll() {
  var die = Math.floor(Math.random() * 6) + 1;

  $('#die').removeAttr('class').addClass('die' + die);
}

#die {
  width: 300px;
  border: 5px solid black;
  padding: 25px;
  margin: 25px;
}

#die.die1 {
  width: 300px;
  border: 5px solid green;
  padding: 25px;
  margin: 25px;
}

#die.die2 {
  width: 300px;
  border: 5px solid pink;
  padding: 25px;
  margin: 25px;
}

#die.die3 {
  width: 300px;
  border: 5px solid violet;
  padding: 25px;
  margin: 25px;
}

#die.die4 {
  width: 300px;
  border: 5px solid yellow;
  padding: 25px;
  margin: 25px;
}

#die.die5 {
  width: 300px;
  border: 5px solid red;
  padding: 25px;
  margin: 25px;
}

#die.die6 {
  width: 300px;
  border: 5px solid blue;
  padding: 25px;
  margin: 25px;
}

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

<div id="die"></div>
<button onclick="roll()">Click me!</button>

如果你想避免所有这些类，你可以从 JS 代码中更改 border-color，例如:

function roll() {
  var colors = ["green", "pink", "violet", "yellow", "red", "blue"];
  var die = Math.floor(Math.random() * colors.length);

  $('#die').css('border-color', colors[die]).addClass('die' + die);
}

#die {
  width: 300px;
  border: 5px solid black;
  padding: 25px;
  margin: 25px;
}

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

<div id="die"></div>
<button onclick="roll()">Click me!</button>