Question

我想在onclick上更改我的表单的某些输入的类，其中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

对于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中，并从所有其他类中删除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"); });

Answer 3

更改此行并尝试：

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

javascript更改多个输入类的onclick

3 个答案: