繁体   English   中英

如何用js/jQuery将div中的元素变成数组

[英]How to turn the elements in a div into an array with js/jQuery

我正在尝试将按钮列表及其名称放入 javascript 中的数组中? 我在 inte.net 上搜索了帮助,但到目前为止还没有找到任何东西。 名称为“apps”的 div 是我试图从中获取的位置,javascript 代码中 if 语句内的数组是我要用数组替换的内容。

HTML 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="clicker.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <title>Vairoon's clicker</title>
</head>
<body>
    <button onclick="smnPlayer()">Get new player</button>
    <p>Players per click: <span id="PPC">1</span></p>
    <p>Players: <span id="players">0</span></p>
    <p>New players per second: <span id="PPS">0</span></p>
    <div class="upgrade">
        <p>Upgrade your clicker game: <span id="upgCost">400</span></p>
        <button id="upgrade">Upgrade clicker</button>
    </div>
    <div id="apps" name="apps"> <!-- The div I'm trying to grab from-->
    <button>Obj1</button>
    <button>Obj2</button>
    </div>
    <script ="clicker.js"></script>
</body>
</html>

Javascript 代码:

var players=0;
var PPS=0;
var PPC=1;
var upgradeCost=400;
var apps = ["New buildings","More upgrades","Adverts","More minigames"]
var basecosts = [0,20,100,1500,15000]
function getEl(elID) {
    return document.getElementById(elID);
}
function smnPlayer() {
    players+=PPC;
    document.getElementById("players").innerHTML=players;
}
getEl("upgrade").onclick = function upgrade() {
    if (players>=upgradeCost) {
        players-=upgradeCost;
        upgradeCost=upgradeCost*3;
        PPC=Math.ceil(PPC*2);
        PPS=PPS*2;
        getEl("players").innerHTML=players;
        getEl("upgCost").innerHTML=upgradeCost;
        getEl("PPC").innerHTML=PPC;
        getEl("PPS").innerHTML=PPS;
    }
}
setInterval(() => {
    if (players>=upgradeCost) {
        getEl("upgrade").style.display="block";
    } else {
        getEl("upgrade").style.display="none";
    }
    for (let index = document.querySelectorAll('#apps').length; index < basecosts.length+1; index++) {
        if (players>=basecosts[index]) {
            if (array.includes(apps[index])){}else{ //the "array" is what to replace with the array
                var button = document.createElement("BUTTON");
                button.innerHTML = apps[index];
                document.getElementById("apps").appendChild(button);
            }
        }
    }
    
},10)

如果您仍然不明白我在做什么,这里有另一种解释:我希望代码为 go 来自

<div>
 <button>Obj1</button>
 <button>Obj2</button>
</div>

["Obj1","Obj2"]

哦,还有一个问题,如果你也能回答,我如何在我用 js 创建的项目之间添加断线?

对于您的简化示例:

 myArray = Array.from(document.querySelectorAll("div button")).map( function(b) { return b.innerText; } ); console.log(myArray); //add a line break: document.querySelector("div").insertBefore(document.createElement("br"),document.querySelectorAll("div button")[1]);
 <div> <button>Obj1</button> <button>Obj2</button> </div>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM