鏈接單擊上的 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]
}