如果輸入被選中，則使用Javascript：addClassName，如果未選中，則使用removeClassName

Question

我試圖選擇文檔的所有li標籤並檢查它是否hasClassName('yes')因此，如果有，它會將其刪除。但我有TypeError：Object [object HTMLLIElement], has no method 'hasClassName'錯誤。

這是DOM方法：

document.observe("dom:loaded", function() { 
    $(document.body).select('input').each(function(element) { 
     element.observe('click', function() { 
      init(); 
     }); 
     init(); 
    }); 

}); 

上面的代碼將初始化函數，並檢查是否有被檢查輸入，並將它們添加了「是」類的名字，但如果我取消勾選那些投入，類仍然存在。 這是我試圖做動態的功能（添加和刪除類'是'）;

function init() { 
    $(document.body).select('input').each(function(element) { 
     if (element.checked) { 
      element.up('li').addClassName('yes'); 
     } 

     if ($(document.body).select('li').hasClassName('yes')) { 
      element.removeClassName('yes'); 
     } 
    }) 
} 

你能幫我解決這個函數的最後部分，所以removeclassname方法會起作用嗎？謝謝。

Answer 1

$(document.body).select('li')返回一個集合，而不是一個元素，對嗎？我會假設你想：

if (element.hasClassName('yes')) { 
     element.removeClassName('yes'); 
    } 

然而，似乎你的邏輯是有缺陷的 - 你第一次添加如果輸入被檢查，那麼你會立即刪除它的類。你錯過了else？也許更類似於：

function init() { 
    $(document.body).select('input').each(function(element) { 
     if (element.checked) { 
      element.up('li').addClassName('yes'); 
     } 
     else { 
      element.up('li').removeClassName('yes'); 
     } 
    }) 
} 

Answer 2

等一下 - 「select」將返回一組元素。 「hasClassName」函數是Element上的一個函數，不是Array或Enumerable。你錯過了「每個（）」圖層。

$$('li').each(function(li) { 
    if (li.hasClassName('yes')) li.removeClassName('yes'); 
});