Блог

Я пытаюсь изменить все поля с именем ‘make’ или ‘model’, которые находятся в списке массива. Я уверен, что я не делаю что-то простое, чтобы заставить это работать. Но эта функция ниже не работает. Как мне изменить имя класса для нескольких полей из списка массива?

 CSS
hide {
display: none;
}

array = ['make','model'];

function deactivateField( array ) {
    count = array.length;
    for (i = 0; i < count; i  ) {
        array[i].className = 'hide' );
    }
}


<td id="make" name="make" class="show">aaa</td>
<td id="make" name="make" class="show">bbb</td>
<td id="make" name="make" class="show">ccc</td>

<td id="model" name="model" class="show">111</td>
<td id="model" name="model" class="show">222</td>
<td id="model" name="model" class="show">333</td>
  

Прежде всего, на HTML-странице не может быть более одного элемента с заданным идентификатором.

Во-вторых, когда вы делаете

  array[i].className = 'hide'
  

вы запрашиваете свойство className строки, взятой из массива; эквивалент выполнения "make".className . Естественно, это не работает; ваше намерение состоит в том, чтобы найти элемент с идентификатором или именем «make», а затем изменить имя класса этого элемента, а не слова «make».

Если вы действительно передаете массив уникальных идентификаторов, то вы можете сделать

 for (i = 0; i < count; i  ) {
    var el = document.getElementById(array[i]);
    el.className = 'hide' );
}
  

но опять же, для этого потребуется, чтобы каждый элемент имел свой собственный уникальный идентификатор.

Мой ответ предполагает, что вы присвоите каждому элементу уникальный идентификатор (потому что это недопустимо) и что значение атрибутов name останется неизменным.

 function deactivateField( array ) {
    var i = 0, j = 0, elements;
    elements = document.getElementsByTagName("td");
    for (; i< elements.length; i  ) {
      for (; j<array.length; j  ) {
        if (elements[i].name === array[j]) {
           elements[i].className = "hide";
        }
      }
   }
}
  

Во-первых, «id» должен быть уникальным. С помощью jQuery вы могли бы это сделать (непроверено). Я не знаю, попытается ли jQuery обработать несколько элементов с одинаковым «id»:

 array = ['make','model'];
function deactivateField( array ) {
    count = array.length;
    for (i = 0; i < count; i  ) {
        $('#'   array[i]).removeClass('show').addClass('hide');
    }
}
  

Во-первых, у вас не может быть нескольких элементов с одинаковым идентификатором. Идентификаторы должны быть уникальными. Кроме того, имеющийся у вас массив фактически не ссылается ни на один из элементов, это просто массив строк. Вам нужно будет использовать селектор, такой как document.getElementsByTagName, чтобы захватить группу селекторов (поскольку IE не поддерживает getElementsByClassName), а затем перебирать их для элементов, имеющих нужный вам класс.

 array = ['make','model'];
elArray = document.getElementsByTagName("td")
function deactivateField( array ) {
    count = elArray.length;
    for (i = 0; i < count; i  ) {
        for(x = 0; x < array.length; x  )
        {
            if(array[x].test(elArray[i]))
            {
                  elArray[i].className = array[x]   " hide";
            }
        }
     }        

<td name="make" class="make show">aaa</td>
<td name="make" class="make show">bbb</td>
<td  name="make" class="make show">ccc</td>

<td  name="model" class="model show">111</td>
<td  name="model" class="model show">222</td>
<td  name="model" class="model show">333</td>
  

Массив не содержит самих элементов, только строки, соответствующие требуемым идентификаторам. Сохраняйте идентификаторы уникальными. Затем используйте DOM, чтобы получить узел: document.getElementById('idName'); . Затем вы сможете манипулировать фактическим элементом.

Другое дело, что CSS должен быть .hide , так как hide пытается найти такой тег.

Вот как я заставил это работать:

 function deactivateField( field_array ) {
    cnt = field_array.length;
    for (a = 0; a < cnt; a  ) {
        changeClassByName( field[a], 'hide' );
    }
}

function changeClassByName( name, classname ) {
    var nm = document.getElementsByName( name );
    count = nm.length;
    for(b = 0; b < count; b  ){
        nm[b].className = classname;
    }
}