Javascript - 将数组拆分为两个，使用href和innerHTML的新数组创建 [英]Javascript - Split array into two, create using new arrays for href and innerHTML 本文翻译自  Beardsley  查看原文  2015-10-27  278    arrays/

Fairly new to Javascript and trying a more complex script (to me, anyway).

相当新的Javascript和尝试更复杂的脚本(无论如何)。

The end-game for this script is the following:

此脚本的最终游戏如下:

1. Element tagged with onclick=(runscript) will prompt script to load a text file of site names/links, separated by commas.

用onclick =(runscript)标记的元素将提示脚本加载由逗号分隔的站点名称/链接的文本文件。

2. Script loads text file into an array.

脚本将文本文件加载到数组中。

3. First loop iterates through array, separating the main array into two new arrays based on even/odd array position. (ex. Site name is 0, link is 1, name is 2, link is 3, etc.)

第一个循环遍历数组,基于偶数/奇数数组位置将主数组分成两个新数组。 (例如,站点名称为0,链接为1,名称为2,链接为3等)

4. Second loop iterates through the site name array, creating a new div element for each value in the array.

第二个循环遍历站点名称数组,为数组中的每个值创建一个新的div元素。

5. Second loop also creates new anchor element, appending it to the div element.

第二个循环还会创建新的锚元素,将其附加到div元素。

6. Second loop sets div's class, anchor's href, and appends the new div to a container div.

第二个循环设置div的类,锚点的href,并将新div附加到容器div。

I feel like I'm making a few noob mistakes and my lack of exposure to Javascript is keeping me from seeing them. I cut out the first two steps to test steps 3-6 instead.

我觉得我犯了一些noob错误,而且我对Javascript的不了解使我无法看到它们。我删除了前两个步骤来测试步骤3-6。

This is what I've managed to come up with so far.. any nudge in the right direction would be awesome.

到目前为止,这是我设法提出的......任何朝着正确方向的推动都会很棒。

Thanks!

var main = ["Google", "http://google.com", 'Gmail', 'http://gmail.com', 'Hotmail', 'http://hotmail.com', 'Battle.net', 'http://battle.net', 'Steam', 'http://steampowered.com'];

function getSites() {
    var site = new Array();
    var link = new Array();
    
    for (var i = 0; i <= main.length; i++) {
        if (i % 2 == 0) {
            link.push(main[i]);
        } else {
            site.push(main[i]);
        }
    }
    for ($i = 1; i <= site.length; i++) {
        var divElement = document.createElement("div");
        var anchorElement = document.createElement("a");
        divElement.appendChild(anchorElement);
        divElement.className = "boxin";
        anchorElement.href = link[i];
        divElement.innerHTML = (site[i]);
        
        linkContainer.appendChild(divElement);
    }

}

getSites();

boxin {
    height: 20px;
    background-color: green;
}

#linkContainer div
{
    border:solid 1px black;
    margin:5px;
}

<div id="linkContainer"></div>

3 个解决方案

#1

You have a bug in the second iteration, you are initializing a new variable $i, but the condition is checking for i<=site.length which will be false since the value of i is updated to main.length at the end of the first loop

你在第二次迭代中有一个错误,你正在初始化一个新的变量$ i,但条件是检查i <= site.length这将是假的,因为i的值在更新时更新为main.length。第一个循环

But you really don't need to use 2 loop to solve the problem, you can use a single loop as below. Also you need to set the label text as the content of anchor element not of the div

但是你真的不需要使用2循环来解决问题,你可以使用如下的单循环。您还需要将标签文本设置为不是div的锚元素的内容

var main = ["Google", "http://google.com", 'Gmail', 'http://gmail.com', 'Hotmail', 'http://hotmail.com', 'Battle.net', 'http://battle.net', 'Steam', 'http://steampowered.com'];

function getSites() {
  for (var i = 0; i < main.length; i += 2) {
    var divElement = document.createElement("div");
    var anchorElement = document.createElement("a");
    divElement.appendChild(anchorElement);
    divElement.className = "boxin";
    anchorElement.href = main[i + 1];
    anchorElement.innerHTML = (main[i]);

    linkContainer.appendChild(divElement);
  }

}

getSites();

boxin {
  height: 20px;
  background-color: green;
}
#linkContainer div {
  border: solid 1px black;
  margin: 5px;
}

<div id="linkContainer"></div>

#2

Do you really need them to be in an array? I think an object would work much better.

你真的需要它们在阵列中吗?我认为一个对象会更好。

var sites = {
  "Google": "http://google.co.uk",
  "Gmail": "http://gmail.com"
};

Then you could loop through the object and achieve what you wanted.

然后你可以遍历对象并实现你想要的。

#3

Try it : i'm change your code little bit... below code 100% workable...

尝试一下:我稍微改变你的代码......下面代码100%可行...

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../js/jquery-1.7.1.min.js"></script>
    <style type="text/css">
        boxin {
            height: 20px;
            background-color: green;
        }

        #linkContainer div {
            border: solid 1px black;
            margin: 5px;
        }
    </style>

</head>
<body>


        <div>
            <div id="linkContainer"></div>
        </div>
        <script type="text/javascript">


            var main = ["Google", "http://google.com", 'Gmail', 'http://gmail.com', 'Hotmail', 'http://hotmail.com', 'Battle.net', 'http://battle.net', 'Steam', 'http://steampowered.com'];

            function getSites() {
                var site = new Array();
                var link = new Array();

                for (var i = 0; i <= main.length; i++) {
                    if (i % 2 == 0) {
                        link.push(main[i]);
                    } else {
                        site.push(main[i]);
                    }
                }
                for (var i = 0; i < site.length; i++) {
                    var divElement = document.createElement("div");
                    var anchorElement = document.createElement("a");
                    divElement.appendChild(anchorElement);
                    divElement.className = "boxin";
                    anchorElement.href = link[i];
                    divElement.innerHTML = (site[i]);
                    document.getElementById("linkContainer").appendChild(divElement);

                }

            }

            getSites();

        </script>

</body>
</html>