Question

我试图让isSelected的骰子为真，以便添加一个类，这样我就可以设置它们的样式，你可以告诉它们已经被视觉选择了。我不是100％确定我是否正确执行了addGlow（）函数。我也试图在javascript而不是jquery中这样做。

这里是最后的js代码和codepen。

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

http://codepen.io/boomer1204/pen/MaVzGL?editors=001

先谢谢你们。

Answer 1

首先，由于您的getSelectedDice函数返回一个数组，您至少应检查addGlow的修改是否有效：

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

其次，你在addGlowDice.className函数中addGlow，而骰子是对象，而不是DOM元素AFAIK。

Answer 2

这是一个有效的发光功能。

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

然后你需要将发光类附加到元素上。

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

将类添加到选定的骰子

2 个答案: