Javascript 向所选模具添加类

我正在尝试获得isSelected为真的骰子来添加一个类，这样我可以对它们进行样式设置，并且您可以直观地看出它们已被选中。我不能100%确定我是否正确地执行了addGlow（）函数。我还尝试用javascript而不是jquery来实现这一点

最后是js代码和代码笔

var dice1 = new dice(1);
var dice2 = new dice(2);
var dice3 = new dice(3);
var dice4 = new dice(4);
var dice5 = new dice(5);
var diceArray = [dice1, dice2, dice3, dice4, dice5];
var rollButton = document.getElementById('roll_button');
var cargo = 0;
var numOfRolls = 0;



//dice object
function dice(id){
    this.id = id;
    this.currentRoll = 0;
    this.previousRoll = 1;
    this.isSelected = false;
    this.diceImageUrl = "img/dice/dice1.png";
    this.roll = function(){
        this.previousRoll = this.currentRoll;
        this.currentRoll = getRandomRoll(1, 6);
    }
}

//returns an array of all dice that are not currently selected so they can be rolled.
function getRollableDiceList(){
    var tempDiceList = [];
    for(var i = 0; i < diceArray.length; i++){
        if(!diceArray[i].isSelected){
            tempDiceList.push(diceArray[i]);
        }
    }
    return tempDiceList;
}

// gets a random number between min and max (including min and max)
function getRandomRoll(min,max){
    return Math.floor(Math.random() * (max-min + 1) + min);
}

// calls the roll function on each dice
function rollDice(rollableDiceList){
    for(var i = 0; i < rollableDiceList.length; i++){
        rollableDiceList[i].roll();
    }
}

// updates each dice with the new url for the image that corresponds to what their current roll is
function updateDiceImageUrl(){
    for(var i = 0; i < diceArray.length; i++){
        var currentDice = diceArray[i];

        currentDice.diceImageUrl = "http://boomersplayground.com/img/dice/dice" + currentDice.currentRoll + ".png";

        //update div image with img that cooresponds to their current roll
        updateDiceDivImage(currentDice);
    }
}

//Displays the image that matches the roll on each dice
function updateDiceDivImage(currentDice) {
    document.getElementById("dice"+currentDice.id).style.backgroundImage = "url('" + currentDice.diceImageUrl +"')";
}

// returns an array of all
function getNonSelectedDice(){
    var tempArray = [];
    for(var i = 0; i < diceArray.length; i++){
        if(!diceArray[i].isSelected){
            tempArray.push(diceArray[i]);
        }
    }
    return tempArray;
}

function getSelectedDice(){
  var selectedDice = [];
  for(var i = 0; i < diceArray.length; i++){
    if(diceArray[i].isSelected){
      selectedDice.push(diceArray[i]);
    }
  }
  return selectedDice;
}

//boolean variables
var shipExist = false;
var captExist = false;
var crewExist = false;

//checks each dice for ship captain and crew. Auto select the first 6, 5 , 4.
function checkForShipCaptCrew(){
    //array of dice that are not marked selected
    var nonSelectedDice = getNonSelectedDice();


    for(var i = 0; i < nonSelectedDice.length; i++){
        //temp variable that represents the current dice in the list
        currentDice = nonSelectedDice[i];

        if (!shipExist) {
            if (currentDice.currentRoll == 6) {
                shipExist = true;
                var addGlowToDice = currentDice;
                addGlowToDice.className = ' glowing';
                currentDice.isSelected = true;
            }
        } else if (!captExist) {
            if (currentDice.currentRoll == 5) {
                captExist = true;
                currentDice.isSelected = true;
            }
        } else if (!crewExist) {
            if (currentDice.currentRoll == 4) {
                crewExist = true;
                currentDice.isSelected = true;
            }
        } else {
            cargo += currentDice;
        }
    }

}

function addGlow(){
  getSelectedDice();
  for (var i = 0; i < getSelectedDice.length; i++){
    var addGlowDice = getSelectedDice[i];
    addGlowDice.className = ' glowing';
  }
}

rollButton.addEventListener('click', function(){
        //generate rollable dice list
    if (numOfRolls < 3) {
        var rollableDiceList = getRollableDiceList();

        //roll each dice
        rollDice(rollableDiceList);

        //update dice images
        updateDiceImageUrl();

        // //auto select first 6, 5, 4 (in that order)
        checkForShipCaptCrew();

        // //adds a red glow to each dice that is selected
        addGlow();
        numOfRolls++;
    }
});

var dice1=新骰子（1）；
var dice2=新骰子（2）；
var dice3=新骰子（3）；
var dice4=新骰子（4）；
var dice5=新骰子（5）；
var diceArray=[dice1，dice2，dice3，dice4，dice5]；
var rollButton=document.getElementById（'roll_button'）；
var货物=0；
var numorls=0；
//骰子对象
功能骰子（id）{
this.id=id；
此.currentRoll=0；
这个.previousRoll=1；
this.isSelected=false；
this.diceImageUrl=“img/dice/dice1.png”；
this.roll=函数（）{
this.previousRoll=this.currentRoll；
this.currentRoll=getRandomRoll（1,6）；
}
}
//返回当前未选择的所有骰子的数组，以便滚动它们。
函数getRollableDiceList（）{
var tempDiceList=[]；
for（var i=0；i

---

提前感谢各位。

首先，由于您的

getSelectedDice

函数返回一个数组，您至少应该检查

addGlow

的修改是否有效：

function addGlow(){
  var gsdArray = getSelectedDice();
  for (var i = 0; i < gsdArray.length; i++){
    var addGlowDice = gsdArray[i];
    addGlowDice.className = ' glowing';
  }
}

函数addGlow（）{
var gsdArray=getSelectedDice（）；
对于（变量i=0；i

---

第二，当骰子是对象而不是DOM元素时，在

addGlowDice

函数中执行

addGlowDice.className

。

这里是一个工作的glow函数

您主要需要从getSelectedDice（）函数中获取数组

然后需要将glow类附加到元素

function addGlow(){
  var selectedDice = getSelectedDice();

  for (var i = 0; i < selectedDice.length; i++){
    var addGlowDice = selectedDice[i];
    addGlowDice.className = ' glowing';

    var element = document.getElementById('dice' + addGlowDice.id);

    element.className = element.className + " glowing";
  }
}

函数addGlow（）{
var selectedDice=getSelectedDice（）；
对于（变量i=0；i

Pet peve：“骰子”的单数形式是“死”。这可能是我遇到的问题。我不是100%确定“如何测试它”。我已经尝试将类名添加到getSelectedDice和它自己的函数中。谢谢！！所以addGlowDice.id只是在拉列表中哪个骰子是正确的？？正确的。我假设addGlowDice中的“id”值与