Мой браузер перестает отвечать на запросы, когда я пытаюсь выполнить этот JS - PullRequest
Новая
       13

Мой браузер перестает отвечать на запросы, когда я пытаюсь выполнить этот JS

0 голосов
/ 16 июля 2011

Я использую этот код для добавления или удаления определенных узлов со страницы на моем сайте: 

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;" и сделать его видимым.

Ответы [ 3 ]

3 голосов
/ 16 июля 2011

Этот код является бесконечным циклом, если 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");
}

Или, что еще прощеверсия кода с использованием: скрытого селектора:

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

function findFirstDisplayNoneChild(parent) {
    return($("#" + parent + " li:hidden").get(0));
}
1 голос
/ 16 июля 2011 
while (node !== "none") {
    (lastnode++);
    (a++);
}

- бесконечный цикл, так как значение узла не изменяется в цикле.Если node !== "none" при достижении цикла, оно никогда не будет равно "none"

0 голосов
/ 16 июля 2011 
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 или prototype или 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'
...