更改函數中元素的className

Question

標題可能有點不對，但那是我認爲函數應該更改爲正確的類的東西。

所以這是我的問題，我已經創建了一個骰子滾筒，計算骰子的總和。 事情是，計數器是在骰子總和之後切換的圖像，並且它們由類名從零調用到九。

當我有一個骰子5號，圖像5顯示，但是當我有2個骰子總和可以說5 + 2圖像5和2顯示而不是7.所以classChange不會工作。 我試圖插入一個element.className =「」，但它立即改變了變量，因爲我把它放在一個循環中。好吧，很難解釋，所以我做了一個jsFiddle。

http://jsfiddle.net/3nZNM/3/

計數器的代碼是一行81和

function numberTotext(nr){ 
    var arrClass=["zero","one","two","three","four","five","six","seven","eight","nine"]; 
    ret=[]; 
    nr=nr.toString(); 
    for(i in nr){ 
     ret.push(arrClass[nr[i]]); 
    } 
    console.log(ret); 
    return ret; 
} 
numberTotext(total) 

     function turnCounter(){  
     for (var i = 0; i < arguments.length; i++){ 
      dice_toolbar_counter_wrapper_Li = createElementWithClass('li',arguments[i]); 
      console.log(dice_toolbar_counter_wrapper_Li) 
      dice_toolbar_counter_wrapper_Ul.appendChild(dice_toolbar_counter_wrapper_Li); 
      document.getElementById("ul"); 
     } 



    } turnCounter(ret); 

Answer 1

之間125，當你計算出總的每次追加新的人之前刪除元素，因此計數器只顯示一個時間，而不是多次。此外，您必須更改CSS，以便更輕鬆地計算出您必須使用的類。

.dice-toolbar-counter-wrapper .side-0 
{ 
    background-position : 0 0; 
} 

.dice-toolbar-counter-wrapper .side-1 
{ 
    background-position : 0 -17px; 
} 

.dice-toolbar-counter-wrapper .side-2 
{ 
    background-position : 0 -34px; 
} 

.dice-toolbar-counter-wrapper .side-3 
{ 
    background-position : 0 -51px; 
} 

.dice-toolbar-counter-wrapper .side-4 
{ 
    background-position : 0 -68px; 
} 

.dice-toolbar-counter-wrapper .side-5 
{ 
    background-position : 0 -85px; 
} 

.dice-toolbar-counter-wrapper .side-6 
{ 
    background-position : 0 -102px; 
} 

.dice-toolbar-counter-wrapper .side-7 
{ 
    background-position : 0 -119px; 
} 

.dice-toolbar-counter-wrapper .side-8 
{ 
    background-position : 0 -136px; 
} 

.dice-toolbar-counter-wrapper .side-9 
{ 
    background-position : 0 -153px; 
} 

更改JS到：CSS來

WORKING JSFIDDLE DEMO

變化相關部分

/*###CREATE ELEMENT WITH CLASS ###*/ 

function createElementWithClass(elementName, className) 
{ 
    var el = document.createElement(elementName); 
    el.className = className; 
    return el; 
} 

/*###CREATE ELEMENT WITHOUT CLASS ###*/ 
function createElementWithOutClass(elementName) 
{ var el = document.createElement(elementName); 
    return el; 
    } 
/*###CREATE ELEMENT WITH ID ###*/ 
function createElementWithId(elementName, idName) 
{ 
    var element = document.createElement(elementName); 
    element.id = idName; 
    return element; 
}  
var outerDiv = createElementWithClass('div', 'dice-window-wrapper'), 
    innerDiv = createElementWithClass('div', 'dice-menubar-wrapper'); 
    outerDiv.appendChild(innerDiv); 
    document.getElementById("page-content-wrapper").appendChild(outerDiv); 

    dice_windows_wrapper_close = createElementWithClass('div', 'close'); 
    innerDiv.appendChild(dice_windows_wrapper_close); 
    document.getElementById("dice-window-wrapper"); 

    dice_toolbar_wrapper_close = createElementWithClass('div', 'dice-toolbar-wrapper'); 
    outerDiv.appendChild(dice_toolbar_wrapper_close); 
    document.getElementById("page-content-wrapper"); 

    add_remove_roll = createElementWithOutClass('ul'); 
    dice_toolbar_wrapper_close.appendChild(add_remove_roll); 
    document.getElementById("dice-content-wrapper"); 

    dice_content_wrapper = createElementWithClass('div', 'dice-content-wrapper'); 
    outerDiv.appendChild(dice_content_wrapper); 

    document.getElementById("page-content-wrapper"); 

    dice_toolbar_counter_wrapper_Ul = createElementWithClass('ul', 'dice-toolbar-counter-wrapper'); 
    dice_toolbar_wrapper_close.appendChild(dice_toolbar_counter_wrapper_Ul); 


    add_remove_roll_func("add","remove","roll"); 

    lielement = createElementWithOutClass('li'); 
    add_remove_roll.appendChild(lielement); 

    lielement.appendChild(dice_toolbar_counter_wrapper_Ul); 


    /* <div class="dice-content-wrapper">*/ /*Visar tärningen som kastast*/ 
    ul_dice_sides = createElementWithOutClass('ul'); 
    dice_content_wrapper.appendChild(ul_dice_sides); 
    document.getElementById("dice-content-wrapper"); 
    function add_remove_roll_func(){ 
     for (var i = 0; i<3; i++){ 
      li_dice_side_one = createElementWithClass('li',arguments[i]); 
      add_remove_roll.appendChild(li_dice_side_one); 
      document.getElementById("ul"); 
     } 
    } 


function getNumberForClass(className){ 
    var diceArray = Array=[ 
    "dice dice-side-one", 
    "dice dice-side-two", 
    "dice dice-side-three", 
    "dice dice-side-four", 
    "dice dice-side-five", 
    "dice dice-side-six"]; 
    return diceArray.indexOf(className)+1; 
} 

/*###CREATE DICES ###*/ 
function dicesides_func(nr){ 
    // go to dice-window-wrapper again 
    // this could be put in a seporate functon 
    var elementToAddDice=" dice-window-wrapper ", 
    obj=this, // using this here that's why it's called wiht 
    dice,i=0,total=0; // all the dice in this dice window 
    // dicesides_func.call to set the right this context 
    while((" "+obj.className+" ").indexOf(elementToAddDice)==-1){ 
     obj=obj.parentNode; 
    } 
    obj=obj.getElementsByTagName("ul")[2]; 
    var dicessides = createElementWithClass('li',nr); 
    obj.appendChild(dicessides); 
    // calculate total (can do in a seporate function) 
    dice = obj.getElementsByTagName("li"); 
    for(i=0;i<dice.length;i++){ 
     total=total+getNumberForClass(dice[i].className); 
    } 
    //alert(total); 

    var wrapper = document.getElementsByClassName("dice-toolbar-counter-wrapper")[0]; 

     while (wrapper.hasChildNodes()) { 
    wrapper.removeChild(wrapper.lastChild); 
    } 

    var newelem = createElementWithClass('li',"side-" + total.toString()); 
      //alert(dice_toolbar_counter_wrapper_Li) 
      wrapper.appendChild(newelem); 



    function numberTotext(nr){ 
    var arrClass=["zero","one","two","three","four","five","six","seven","eight","nine"]; 
    ret=[]; 
    nr=nr.toString(); 
    for(i in nr){ 
     ret.push(arrClass[nr[i]]); 
    } 
    console.log(ret); 
    return ret; 
} 
numberTotext(total) 
/* 
     function turnCounter(){  
     for (var i = 0; i < arguments.length; i++){ 
      dice_toolbar_counter_wrapper_Li = createElementWithClass('li',arguments[i]); 
      //alert(dice_toolbar_counter_wrapper_Li) 
      dice_toolbar_counter_wrapper_Ul.appendChild(dice_toolbar_counter_wrapper_Li); 
      document.getElementById("ul"); 



     } 



    } turnCounter(ret);*/ 
} 
function AddEvent(){ 
     var AddEvent = "add"; 
     var addClass= document.getElementsByClassName(AddEvent); 
     addClass=addClass[addClass.length-1]; 
     addClass.addEventListener("click", addDiceEvent, true); 
     var diceArray = Array=[ 
     "dice dice-side-one", 
     "dice dice-side-two", 
     "dice dice-side-three", 
     "dice dice-side-four", 
     "dice dice-side-five", 
     "dice dice-side-six"]; 
     <!-- console.log("when set",addClass); --> 
     function addDiceEvent() { 
      var rand = diceArray[Math.floor(Math.random() * diceArray.length)]; 
      dicesides_func.call(addClass,rand); 
        }   

    } 
    AddEvent(); 
    function RemoveEventDice(){ 
     var removeEvent = "remove"; 
     var removeClass= document.getElementsByClassName(removeEvent); 
     var remove=removeClass[removeClass.length-1]; 
     remove.addEventListener("click", removeDice, true); 

     function removeDice(e) { 
      var obj=e.target; 
      var elementToRemove=" dice-window-wrapper "; 
      while((" "+obj.className+" ").indexOf(elementToRemove)==-1){ 
       obj=obj.parentNode; 
      } 
      var allDiceInWindow=obj.getElementsByClassName("dice"); 
      var diceToRemove=allDiceInWindow[allDiceInWindow.length-1]; 
      diceToRemove.parentNode.removeChild(diceToRemove); 
     } 
    } 
    RemoveEventDice(); 
function rollEvent(){ 
     var rollDices = "roll"; 
     var addClass= document.getElementsByClassName(rollDices); 
     addClass=addClass[addClass.length-1]; 
     addClass.addEventListener("click", rollDice, true); 
     var diceArray = Array=[ 
     "dice dice-side-one", 
     "dice dice-side-two", 
     "dice dice-side-three", 
     "dice dice-side-four", 
     "dice dice-side-five", 
     "dice dice-side-six"]; 
     function rollDice(e) { 
    var obj=e.target; 
    var elementToRemove = " dice-window-wrapper "; 
    while((" "+obj.className+" ").indexOf(elementToRemove)==-1){ 
     obj=obj.parentNode; 
    } 
    var allDiceInWindow=obj.getElementsByClassName("dice"); 

    for(var i = 0; i<allDiceInWindow.length; i++){ 
     // set the name individually for each die 
     var name = diceArray[Math.floor(Math.random() * diceArray.length)]; 
     allDiceInWindow[i].className = name; 
    } 
} 
    } 
    rollEvent();