Question

我正在尝试更改阵列列表中名称为“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>

Answer 1

首先，HTML页面中不能有多个具有给定ID的元素。

其次，当你做

时

 array[i].className = 'hide'

你要求从数组中取出字符串的属性className;相当于做"make".className。当然，这不起作用;你的意图是找到id或名称为“make”的元素，然后更改该元素的className，而不是单词“make”。

如果您确实传递了一系列唯一ID，那么您可以

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

但同样，这将要求每个元素都拥有自己的唯一ID。

Answer 2

我的回答是假设你会给每个元素一个唯一的ID（因为那是无效的），并且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";
        }
      }
   }
}

Answer 3

首先，“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');
    }
}

Answer 4

首先，您不能拥有多个具有相同ID的元素。 Id的意思是独一无二的。你拥有的数组实际上并没有引用任何元素，它只是一个字符串数组。您将需要使用诸如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>

Answer 5

数组本身不包含元素，只包含与所需id对应的字符串。保持ID唯一。然后使用DOM来获取节点：document.getElementById('idName');。然后，您将能够操纵实际元素。

另一方面，CSS应为.hide，因为hide会尝试找到此类标记。

Answer 6

以下是我如何使用它：

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

Javascript - 使用数组更改类名

6 个答案: