尝试执行此JS时，我的浏览器无响应 [英] My browser goes unresponsive when I try to execute this JS

问题描述

我使用以下代码从网站上的页面添加或删除某些节点:

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，但也没有找到任何东西.

我要使用此脚本进行的操作是找到具有style="display:none;"属性的formtbody的第一个子节点，并使它可见.

解决方案

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

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

循环中的任何内容都不会更改node的值，因此一旦循环开始，就永远不会停止.

此外，此语法很奇怪，不是必需的:

(lastnode++);

删除括号，就这样:

lastnode++;

使用jQuery库(这使得跨浏览器DOM操作非常容易)，下面是一些代码，可在设置为显示的列表中查找第一项:无.

这是一个有效的版本: 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选择器的任何甚至更简单的代码版本:

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

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

I use this code to add or remove certain nodes from a page I have on my site:

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

I execute with addRemoveClass("add") and addRemoveClass('remove')

But when I try to add, it goes unresponsive. I think it's getting stuck in an infinite loop but I can't tell.

I've tried JS Lint but it didn't find anything either.

What I'm trying to do with this script is find the first child node of formtbody with the style="display:none;" attribute and make it visible.

解决方案

This code is an infinite loop if node !== "none" when the loop starts:

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

Nothing in the loop changes the value of node so once the loop starts, it will never stop.

Also, this syntax is odd and not required:

(lastnode++);

Remove the parens so it's just:

lastnode++;

Using the jQuery library (which makes cross browser DOM manipulation sooo much easier), here's some code to find the first item in a list that is set to display: none.

Here's a working version: http://jsfiddle.net/jfriend00/Um95a/

and the code:

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 (run after page is loaded):

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

Or, any even simpler version of the code using the :hidden selector:

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

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

这篇关于尝试执行此JS时，我的浏览器无响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！