1

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

所以这是我的问题，我创建了一个骰子滚轮，它计算骰子的总和。问题是计数器是在骰子总和之后切换的图像，它们被从零到九的类名调用。

当我有一个数字为 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);
4

1 回答 1

1

Remove element before appending new one when you calculate the total each time, so the counter only shows one time and not multiple times. Also you have to change CSS to make it easier to be able to calculate what class you have to use.

WORKING JSFIDDLE DEMO

Change relevant parts of CSS to:

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

Change JS to:

/*###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();
于 2013-02-09T22:45:58.870 回答