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"); 
});