javascript更改多个输入onclick的类

Question

我想更改我的表单的某些输入的类别，在点击时具有 class='mypost_title'。

我试过了，还是不行

<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 类添加到单击的 div 并从所有其他 div 中删除 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");
});