链接单击上的 Javascript 代码仅运行一次，我希望每次单击链接时都运行它

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

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

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

第三，我运行了一个循环并为 div 分配了新的类名。

4th 我在链接上合并了 onClick changeClass(0) changeClass(1) 等事件并运行了该函数。

下面的代码没问题，当我第一次点击链接时，当我点击另一个带有 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];时，您将删除所查询元素上的所有类elements[i].className = style[value]; 因此document.getElementsByClassName("test")在后续调用中不会匹配任何内容。

不清楚你的意图是什么，但如果你只是想添加到你的类列表中，请替换elements[i].className = style[value]; with elements[i].className += style[value];

Answer 3

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

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

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

因此，它无法在初始调用后找到类名“test”以执行任何操作。 您必须刷新页面或调用不同的函数才能将类名更改回“test”。

您可能想要声明“test1”、“test2”、“test3”等的 ID。

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

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