Question

我创建了一个用于分割值的函数并在for循环中运行，但for循环在单个循环之后终止。

如果我有一个包含4个项目的数组，那么它只运行一次：

function color_change() {
    //alert(document.getElementById("dom-target"));
    var div_fgh = document.getElementById("dom-target");
    var myData = div_fgh.textContent;
    //alert(myData);
    alert(myData);
    var stall_wished= myData;
    var array_WW= stall_wished.split(",");
    alert(array_WW.length);
    for (j=0;j<array_WW.length;j++){
        var wished_stalls = array_WW[j];
        alert(wished_stalls);
        document.getElementById(wished_stalls).style.background="#F90";
    }

}

Answer 1

http://jsfiddle.net/40y8a3p3/

在控制台中看到错误。

Uncaught TypeError: Cannot read property 'style' of null

这是因为没有使用ids定义的元素1，2，3，4，5

所以第一次进入循环会给你一个警告，然后就会出现错误并且它会中断。

定义所有ID，它将起作用

这里是：http://jsfiddle.net/40y8a3p3/1/

根据dsfq在另一个答案中指出的内容，我有另一个选择解决它，如果有一个空格（字符串导致字符串数组不完全匹配元素ID）文字你可以看到这个http://jsfiddle.net/40y8a3p3/3/

编辑：根据OP的评论，我做了一些修改代码.. http://jsfiddle.net/vkgg9rg1/10/我只需要修剪白色在通过ID查找元素之前的空格，因为它可能包含白色空格。

Answer 2

问题似乎是字符串拆分操作的不整齐结果。很可能,个字符周围有空格会导致不完全匹配元素ID的字符串数组。因此结果document.getElementById(wished_stalls)返回null并且在第一轮之后循环失败。

在拆分方法中使用regexp：

var array_WW = stall_wished.split(/\s*,\s*/);

以下是您可以看到差异 http://jsfiddle.net/ngy28ky2/

的演示

Answer 3

＆＃13;

function color_change()
{
//alert(document.getElementById("dom-target"));
var div_fgh = document.getElementById("dom-target");
  var myData = div_fgh.textContent;
   // var myData = div_fgh.value;// use value if is input type.
console.log(myData);

var stall_wished= myData;
    var array_WW= stall_wished.split(",");
for (var j=0;j<array_WW.length;j++){

var wished_stalls = array_WW[j];

document.getElementById(wished_stalls).style.background="#F90";
}

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dom-target">1,2,3,4,5</div>
<div id="1" style="width:10px;height:10px;border: 2px solid;"></div>
<div id="2" style="width:10px;height:10px;border: 2px solid;"></div>
<div id="3" style="width:10px;height:10px;border: 2px solid;"></div>
<input type="button" onclick="color_change()" value="Click"/>

＆＃13;

看看你是否正在尝试这样的事情：

在JavaScript中运行循环的麻烦

3 个答案: