在函數中的元素上更改className

Question

標題可能有點錯誤，但這就是我認為應該更改為正確類的功能。

所以這是我的問題，我創建了一個骰子滾輪，它計算骰子的總和。 事實是，計數器是在骰子總和之后切換圖像，它們通過類名從零到九來調用。

當我有一個數字5的骰子時，圖像5會顯示，但是當我有2個骰子的總和時，可以說5 + 2的圖像5和2會顯示而不是7。所以classChange將無法工作。 我試圖插入element.className =“”，但是由於我將其放入循環，因此它立即更改了變量。 好，很難解釋，所以我做了一個jsFiddle。

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

計數器的代碼在81到125之間行

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

每次計算總數時，請在添加新元素之前刪除元素，因此計數器僅顯示一次，而不顯示多次。 另外，您還必須更改CSS，以便更輕松地計算必須使用的類。

工作JSFIDDLE演示

將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更改為：

/*###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();