Question

标题可能有点不对，但这就是我认为函数应该改为正确的类。

所以这是我的问题，我创造了一个骰子，计算骰子的总和。问题是计数器是在骰子总和之后切换的图像，并且它们通过类名从0到9调用。

当我有一个数字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，以便更容易计算您必须使用的类。

WORKING JSFIDDLE DEMO

将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();

在函数中更改Element上的className

1 个答案: