Question

我设计了一个模板，我给用户提供选项，改变div的风格，他们有5种不同的选项可供选择，每种风格都与每个类名相关联，所以当用户点击链接时将改变div风格。所以，我用javascript代码更改了div的类名：

function changeClass(value){

        style = [ 'view view-first', 'view view-second', 'view view-third', 'view view-fourth', 'view view-fifth' ];
         var elements = document.getElementsByClassName("test");
         for(var i = elements.length - 1; i >= 0; i--)
        {

            // PERFORM STUFF ON THE ELEMENT
            elements[i].className = style[value];

            // elements[i] no longer exists past this point, in most browsers
        }   
        }

第一次我收集了想要更改的div的类名，并将其存储在一个数组中，

第二天我用新的类名创建了一个新数组。

第三次我跑了一个循环并为div分配了新的类名。

第4页我在链接上加入了onClick changeClass（0）changeClass（1）etc事件并运行了该函数。

以下代码没问题，当我第一次点击链接时，当我点击另一个带有onClick事件的链接时，样式剂量会发生变化。特别是当我在页面中第一次点击任何链接时，才会发生类名更改。

我的目标是根据相关链接更改div的样式。

Answer 1

它仅在第一次起作用，因为您正在搜索具有test类的元素。然后用函数中的类替换类。因此，第一次运行后没有test类的元素，随后在以下运行中找不到任何元素。

解决方法（保留test类，但仅用于选择而不是用于样式）

    var style = ['view view-first', 'view view-second', 'view view-third', 'view view-fourth', 'view view-fifth'];

    function changeClass(value) {

      var targetClass = "test",
          elements = document.getElementsByClassName( targetClass );
      
      for (var i = elements.length - 1; i >= 0; i--) {

        // PERFORM STUFF ON THE ELEMENT
        elements[i].className = targetClass + ' ' +  style[value];

        // elements[i] no longer exists past this point, in most browsers
      }
    }

.view-first{color:red;}
.view-second{color:blue;}
.view-third{color:green;}
.view-fourth{color:yellow;}
.view-fifth{color:orange;}

<div class="test">Test #1</div>
<p> irrelevant text </p>
<div class="test">Test #2</div>
<p> irrelevant text </p>
<p> irrelevant text </p>
<div class="test">Test #3</div>
<div class="test">Test #4</div>
<div class="test">Test #5</div>
<p> irrelevant text </p>
<p> irrelevant text </p>
<p> irrelevant text </p>
<div class="test">Test #6</div>
<div class="test">Test #7</div>

<button onclick="changeClass(0);">first (red)</button>
<button onclick="changeClass(1);">second (blue)</button>
<button onclick="changeClass(2);">third (green)</button>
<button onclick="changeClass(3);">fourth (yellow)</button>
<button onclick="changeClass(4);">fifth (orange)</button>

jQuery的另一种选择

var style = ['view view-first', 'view view-second', 'view view-third', 'view view-fourth', 'view view-fifth'];

function changeClass(value) {
    $('.test').removeClass().addClass( style[value] ).addClass( 'test' );
}

Answer 2

当您执行elements[i].className = style[value];时，您已删除查询元素上的所有类，因此document.getElementsByClassName("test")在后续调用中不会匹配任何内容。

您的意图并不完全清楚，但如果您只想添加到班级列表中，请将elements[i].className = style[value];替换为elements[i].className += style[value];

Answer 3

在初始调用changeClass之后，将不再有任何“test”类名。

 elements[i].className = style[value];

将className“test”更改为函数调用中指定的任何样式索引。

因此在初始调用之后无法找到类名“test”。您必须刷新页面或调用其他函数才能将类名更改回“test”。

您可能希望声明ID为“test1”，“test2”，“test3”等等。

然后你可以调用（如果元素是输入）：

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
  if(inputs[i].id.indexOf("test") >= 0)
    inputs[i].className = style[value]
}

链接点击上的Javascript代码只运行一次，我想在每次点击链接时运行它

3 个答案: