javascript更改類的多個輸入onclick

Question

我想改變我的窗體的一些輸入的類在class ='mypost_title'onclick。

我嘗試這樣做，這是行不通的

<a href='' onclick='popup_mypost(e)'>change me</a> 
<a href='' id=edit-href onclick='popup_mypost(e)'>back me</a> 

<script> 
    function popup_mypost(e) 
    { 
     var inputs = document.getElementsByClassName("mypost_title"); 
     for(var i = 0; i < inputs.length; i++) 
      { 
      inputs[i].className = "change"; 
      } 

     var edit_href = document.getElementById("edit-href"); 
     edit_href.onclick = function() 
     { 
      var inputs = document.getElementsByClassName("change"); 
      for(var i = 0; i < inputs.length; i++) 
       { 
       inputs[i].className = "mypost_title"; 
       } 
     } 
    } 
</script> 

Answer 1

的方法是getElementsByClassName - 也就是說，你錯過了一個s！

文檔：https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName

Answer 2

改變這一行，並嘗試：

var inputs = document.getElementsByClassName("mypost_title");

Answer 3

對於一個jQuery方法見下文我的代碼。我個人認爲這更容易閱讀和遵循。此外，這將完全跨瀏覽器！

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> 

$(document).ready(function() { 
    $(".mypost_title").each(function() { 
     $(this).addClass("change"); 
    }); 
}); 

</script> 

我已經快速檢查了與getElementsByClassName的跨瀏覽器兼容性，結果非常令人驚訝。 IE8及以下版本不支持這個！請在此處查看tests。

---

編輯

我猜一點點你在找什麼在這裏。這是我的解釋：

當其中一個div被點擊時，你想添加change類到被點擊的類並從其他所有類中刪除change類？

在這種情況下，你會怎麼做：

//This focus event will fire when the user "focuses" on an input 
$(".mypost_title").focus(function() { 
    $(this).removeClass("mypost_title"); 
    $(this).addClass("change"); 
}); 

//This blur event will fire when the user clicks outside the input, or tabs out etc 
$(".mypost_title").blur(function() { 
    $(this).removeClass("change"); 
    $(this).addClass("mypost_title"); 
});