0

我有一个骰子函数，可以将骰子的总和相乘，将总和存储在变量中，然后将总和打印出来。没问题，但是当我运行应用程序两次时。第二个应用程序影响第一个应用程序的总和。

我尝试使用 localStorage，但没有任何效果。这是我在两个应用程序中显示不同结果的最接近的结果

我希望能够运行多个应用程序但不泄漏信息。有小费吗 ？

一个 jsFiddle http://jsfiddle.net/dymond/gUL9U/ <-- 运行应用程序两次，你就会看到问题。

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
    if(nr)
    {
        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");
    }
    else
    {
        dice = document.getElementsByClassName("dice");   
    }
    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 ttl = total.toString();
    var arr = [];
    for (var i = 0;i<ttl.length;i++) {
        var digit = ttl[i];
        var newelem = createElementWithClass('li',"side-" + ttl[i]);
        //alert(dice_toolbar_counter_wrapper_Li)
        wrapper.appendChild(newelem);
    } 

}
4

2 回答 2

1

试试这个代码：Main.js

function pageWrap(){
    /* --------DIV TAGGAR MED CLASS -------- */

    var outerDiv = createElementWithClass('div', 'dice-window-wrapper'),
    innerDiv = createElementWithClass('div', 'dice-menubar-wrapper');
    outerDiv.appendChild(innerDiv);
    document.getElementById("page-content-wrapper").appendChild(outerDiv);


    var dice_windows_wrapper_close = createElementWithClass('div', 'close');
    innerDiv.appendChild(dice_windows_wrapper_close);

    var dice_toolbar_wrapper_close = createElementWithClass('div', 'dice-toolbar-wrapper');
    outerDiv.appendChild(dice_toolbar_wrapper_close);

    var add_remove_roll = createElementWithOutClass('ul');
    dice_toolbar_wrapper_close.appendChild(add_remove_roll);

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

    var 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");

    var 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*/
    var ul_dice_sides = createElementWithOutClass('ul');
    dice_content_wrapper.appendChild(ul_dice_sides);

    /*###CREATE ADD_REMOVE_ROLL DICES ###*/
    function add_remove_roll_func(){
        for (var i = 0; i<arguments.length; i++){
            li_dice_side_one = createElementWithClass('li',arguments[i]);
            add_remove_roll.appendChild(li_dice_side_one);

        }
    }

    /*ADD EVENT*/
    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"]; 
        function addDiceEvent() { 
            var rand = diceArray[Math.floor(Math.random() * diceArray.length)];
            dicesides_func.call(addClass,rand);
           document.getElementById('mySound').play();
         }
    }
    AddEvent(); 
    /*ADD EVENT END*/               
    /*REMOVE DICE*/
    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); 
            dicesides_func.call(remove);//dicesides_func();
        }

    }
    RemoveEventDice();
    /*REMOVE DICE END*/
    /*ROLL DICE*/
    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;
            }
            dicesides_func.call(addClass);//dicesides_func();
        }   
    }
    rollEvent();
    /*END ROLL DICE*/

    function CloseEvent(){  /*Behöver ändras om index sidan ändras*/
        var CloseEvent = "close"; 
        var addClassArr= document.getElementsByClassName(CloseEvent); 
        var addClass = addClassArr[addClassArr.length-1]; 
        addClass.addEventListener("click", closebutton, true); 
        function closebutton(e) { 
            var classToRemove = " "+"dice-window-wrapper"+" "; 
            var obj=e.target; 
            while((" "+obj.className+" ").indexOf(classToRemove)==-1){ 
                obj=obj.parentNode; 
            }        
            obj.parentNode.removeChild(obj); 
        }
    }

    CloseEvent();    
    movewrap();
}

函数器.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;
}    

/* Funktionen som visar nya tabort och kasta tärningarna ## END */

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

function dicesides_func(nr){
    var elementToAddDice=" dice-window-wrapper ", obj=this, dice,i=0,total=0;
        while((" "+obj.className+" ").indexOf(elementToAddDice)==-1){
            obj=obj.parentNode;
        }
        obj=obj.getElementsByTagName("ul")[2];
    if(nr){
        var dicessides = createElementWithClass('li',nr);
        obj.appendChild(dicessides);
        dice = obj.getElementsByTagName("li");
    }else{   
        dice = obj.getElementsByTagName("li");
    }

    for(i=0;i<dice.length;i++){
        total=total+getNumberForClass(dice[i].className);
    }

 //   console.log(obj.parentNode.parentNode.className.getElmentsByClassName[]);

    var wrapper = obj.parentNode.parentNode.getElementsByClassName("dice-toolbar-counter-wrapper")[0];
    while (wrapper.hasChildNodes()) {
        wrapper.removeChild(wrapper.lastChild);
    }
    var ttl = total.toString();
    for (var x = 0;x<ttl.length;x++) {
        var newelem = createElementWithClass('li',"side-" + ttl[x]);
        //alert(dice_toolbar_counter_wrapper_Li)
        wrapper.appendChild(newelem);
    } 
}
于 2013-02-14T02:09:06.107 回答
0

选择合适的包装器，你应该没问题：也许在创建应用程序时使用全局计数器变量，以便以后知道你当前正在使用哪个应用程序？

本节选择第一个包装器：

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

如果我将此 0 更改为 1 而不是我弄乱了应用程序 2 而不是 1，因为您实际上是在包装器数组中选择 [0] 键。

顺便说一句！

于 2013-02-13T23:49:15.177 回答