Question

我使用此代码在我网站上的页面中添加或删除某些节点：

function nextChild() {

var elem = document.getElementById('formtbody');
var a = 0;
var b = elem.childNodes[a];
var node = b.style.display;
var lastnode = 0;

while (node !== "none") {
    (lastnode++);
    (a++);
}
(lastnode++);
var c = lastnode;
var therightnode = elem.childNodes[c];
return therightnode;
}

function addRemoveClass(option) {

var elem = document.getElementById('formtbody');

if (option === "add") {
    nextChild().style.display = "";
} else if (option === "remove") { 
    elem.lastChild.style.display = "none";
    elem.lastChild.form.reset();
}
}

我使用addRemoveClass("add")和addRemoveClass('remove')

执行

但是当我尝试添加时，它没有反应。我认为它陷入无限循环但我无法分辨。

我尝试过JS Lint，但它也找不到任何东西。

我正在尝试使用此脚本找到具有formtbody属性的style="display:none;"的第一个子节点，并使其可见。

Answer 1

如果循环开始时node !== "none"，则此代码为无限循环：

while (node !== "none") {
    (lastnode++);
    (a++);
}

循环中没有任何内容改变node的值，所以一旦循环开始，它就永远不会停止。

此外，这种语法很奇怪而且不是必需的：

(lastnode++);

删除parens所以它只是：

lastnode++;

使用jQuery库（这使得跨浏览器DOM操作变得更容易），这里有一些代码可以找到列表中设置为display：none的第一项。

这是一个有效的版本：http://jsfiddle.net/jfriend00/Um95a/

和代码：

HTML：

<ul id="container">
    <li class="show">First item</li>
    <li class="hide">Second item</li>
    <li class="show">Third item</li>
    <li class="show">Fourth item</li>
    <li class="show">Fifth item</li>
</ul>
<br><br>
<div id="result"></div>

CSS：

.hide {display: none;}

Javascript（在页面加载后运行）：

function findFirstDisplayNoneChild(parent) {
    var result = null;
    $("#" + parent + " li").each(function() {
        if ($(this).css("display") == "none") {
            result = this;
            return(false);    // break out of each() function
        }
    });
    return(result);
}

var hidden = findFirstDisplayNoneChild("container");
if (hidden) {
    $("#result").html("Hidden Element: '" + hidden.innerHTML + "'");
} else {
    $("#result").html("No hidden elements found");
}

或者，使用：hidden selector：

的任何更简单的代码版本

http://jsfiddle.net/jfriend00/Xsgmu/

function findFirstDisplayNoneChild(parent) {
    return($("#" + parent + " li:hidden").get(0));
}

Answer 2

while (node !== "none") {
    (lastnode++);
    (a++);
}

是一个无限循环，因为节点的值在循环中不会改变。如果达到循环时node !== "none"，则永远不会等于“无”

Answer 3

function nextHiddenChild(element) {
   var child = element.firstChild;
   while (child && child.style.display !== 'none') {
      child = child.nextSibling;
   }
   return child
}

function addRemoveClass(option) {
   var elem = document.getElementById('formtbody');

   if (option === "add") {
      elem = nextHiddenChild(elem);
      if (elem !== null) {
         elem.style.display = '';
      }
   } else if (option === "remove") { 
      elem.lastChild.style.display = 'none';
      elem.lastChild.form.reset();
   }
}

但我建议你使用像jQuery这样的库。说真的，你在浪费时间学习直接DOM操作的细节。除了学习内部和外部的DOM（例如建立一个站点）之外，你还有工作要做，然后去获取jQuery或原型或MooTools或任何其他库并使用它。之后，如果你有时间，你可以回来看看它是如何运作的。

另外，解决有关变量a和b的问题：它们只是标量值。它们不是引用类型，不是对象。仅仅因为你在先前的语句中使用a从数组中获取值不会以某种方式将该数组绑定到a的更新值。

var arr = ['x', 'y', 'z'],
   a = 0,
   value;
value = arr[a];
alert(value); //'x'
a += 1;
alert(value); //notice value hasn't changed, and why should it? You haven't assigned anything to it since last time.
value = arr[a];
alert(value); // now it's 'y'

当我尝试执行这个JS时，我的浏览器没有响应

3 个答案: