將類添加到選定的模

Question

我試圖讓被選中的骰添加一個類，以便我可以設置它們的樣式，並且您可以告訴它們已被選中。我不是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（）函數中獲取數組。

然後您需要將輝光類追加到元素。

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

Answer 2

首先，由於您的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 。