Javascript - getElementById возвращает ноль несмотря на элементы с заданными идентификаторами, существующие на странице - PullRequest
Новая
       12

Javascript - getElementById возвращает ноль несмотря на элементы с заданными идентификаторами, существующие на странице

1 голос
/ 02 сентября 2011

Я пишу ряд функций для отображения и скрытия различных элементов div на странице, применяя классы стилей, называемые «скрытыми» и «видимыми», с помощью setAttribute. Эта функция предназначена для сокрытия нескольких div-ов одновременно. Идентификатор каждого div, которому будет присвоен класс «hidden», указан в массиве.

Каждый div может иметь более одного класса, поэтому, когда div присваивается «скрытый» класс, его другие классы должны сохраняться, за исключением заменяемого «видимого» класса. 

function hideSections() {
  // Initialise array with div IDs
  var divs = new Array("tab-1", "tab-2", "tab-3", "tab-4", "tab-5");

  // Loop through divs in array
  for (var count = 0; count < divs.length; count++) {

    // Get existing classes
    var div = document.getElementById(divs[count]);
    var divClass = div.getAttribute("class");

    // Remove "visible" class if it exists
    divClass = divClass.replace("visible", "");

    // Append "hidden" class
    div.setAttribute("class", divClass + " hidden");
  }
}

По какой-то причине эта функция не работает, хотя она определенно вызывается.

Предупреждение (), помещенное в цикл, появляется, если оно находится перед строкой [[var divClass = div.getAttribute ("class");]]. После этой строки его нет, поэтому я предполагаю, что в этой строке проблема.

У всех элементов div указан атрибут класса.

Ответы [ 3 ]

0 голосов
/ 02 сентября 2011

Что вам нужно, так это служебные функции для добавления и удаления классов.Вот некоторые из них, которые я использую: 

var trim = function(s) {
  return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}

var hasClassName = function(el, cName) {
    if (typeof el == 'string') el = document.getElementById(el);

    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
    return el && re.test(el.className);
}

var addClassName = function(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (!hasClassName(el, cName)) {
        el.className = trim(el.className + ' ' + cName);
    }
}

var removeClassName = function(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (hasClassName(el, cName)) {
        var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
        el.className = trim(el.className.replace(re, ''));
    }
}

Теперь вы можете сделать: 

addClass(elementOrId, 'classValue');

Обертывание в «пространстве имен» или в любом другом виде.

0 голосов
/ 03 сентября 2011

Попробуйте что-то вроде этого: 

    function hideSections() {
    // Initialise array with div IDs
    var divs = ["tab-1", "tab-2", "tab-3", "tab-4", "tab-5"];

    // Loop through divs in array
    for (var count = 0; count < divs.length; count++) {

        // Get existing classes
        var div = document.getElementById(divs[count]);
        var divClass = div.getAttribute("class");

        // Remove "visible" class if it exists
        var regex = new RegExp( '(?:^|\\s+)' + 'visible' + '(?=\\s|$)', 'i' );
        if ( regex.test( divClass ) ) {
            divClass = divClass.replace( regex, '' ).replace( /^\s+/, '' );

            // Append "hidden" class
            if ( divClass )
                div.setAttribute( 'class', divClass + ' hidden' );
            else
                div.setAttribute( 'class', 'hidden' );
        }

    }
}

Также вы можете попробовать это из jsfiddle

0 голосов
/ 02 сентября 2011

Полагаю, у вас есть элементы, у которых нет атрибута класса, поэтому divClass имеет значение null, что приводит к ошибке в строке divClass = divClass.replace("visible", "");. (невозможно вызвать метод с нулевым значением)

Попробуйте проверить атрибут: 

  // Initialise array with div IDs
  var divs = new Array("tab-1", "tab-2", "tab-3", "tab-4", "tab-5");

  // Loop through divs in array
  for (var count = 0; count < divs.length; count++) {

    // Get existing classes
    var div = document.getElementById(divs[count]);
    var divClass = '';
    if(divClass = div.getAttribute("class")) {
        // Remove "visible" class if it exists
        divClass = divClass.replace("visible", "");
    }

    // Append "hidden" class
    div.setAttribute("class", divClass + " hidden");
  }

... или вы можете проверить демонстрацию JSFiddle, которую я создал .

...