Question

我在使用js编写脚本时非常新。我的问题是，如何在h1设置onclick，在另一个div处将显示设置为none？

这是我的代码：

var iter;

        function toggleGroups()
        {
            function getAllGroups()
            {
                titlebars = document.getElementsByClassName('titlebar_js');
                groupfields = document.getElementsByClassName('inner_groups_gether');
                for(i = 0; i < titlebars.length;i++)
                {
                    tb = titlebars[i];
                    iter = i;
                    tb.onclick = function()
                    {
                        alert(iter);
                        groupfields[iter].style.display = 'none';
                    }
                }
            }           
            getAllGroups();
        }

        window.onload = function()
        {
            toggleGroups(); // Aufruf der Funktion
        }

它不起作用。

Answer 1

嘿，另一个人是对的，jQuery非常适合快速解决这个问题。例如：

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery(window).bind("load", function() { 
            $('h1').click(function() {
                $('div.toBeHidden').css('display','none');
            });
        });
    </script>
</head>
<body bgcolor="yellow">
<h1>Click me!</h1>
<div class="toBeHidden">
    This block will be hidden after clicking the h1... 
</div> 
</body>
</html>

在这里，您告诉浏览器抓取任何h1标签，并使类“toBeHidden”的div消失。

你可以学习bout jQuery here。值得肯定的是。在开始使用jQuery后，我很少再使用纯javascript。

Answer 2

你真的应该看一下javascript库，例如jquery。

Answer 3

你陷入了一个常见的JS闭包错误。试试这个：

tb.onclick = function(val) {
                    return function() {
                    alert(val);
                    groupfields[val].style.display = 'none'; }
                }(iter);

在这里，您可以阅读有关使用闭包和事件处理程序的更多信息： http://www.webreference.com/programming/javascript/rg36/

Answer 4

    function toggleGroups()
    {
        var titlebars = document.getElementsByClassName('titlebar_js'),
            groupfields = document.getElementsByClassName('inner_groups_gether'),
            tLength = titlebars.length,
            tb, iter;

        while (tLength--)
        {
            tb = titlebars[tLength];
            iter = tLength;
            tb.onclick = function(iter)
            {
                return function() 
                {
                    alert(iter);
                    groupfields[iter].style.display = 'none';
                }
            }(iter);
        }
    }
    window.onload = function()
    {
        toggleGroups(); // Aufruf der Funktion
    }

JS：单击h1将另一个div的显示设置为none

4 个答案: