代码之家 › 专栏 › 技术社区 › rakete

js:单击h1将另一个分区的显示设置为“无”。

css javascript

rakete · 技术社区 · 15 年前

我对用JS编写脚本非常熟悉。我的问题是,如何在h1设置onclick,而h1在另一个分区将显示设置为none?

这里是我的代码:

VITER 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
        }

它不起作用。

4 回复 | 直到 15 年前

Marcos Buarque 15 年前

嘿,另一个人是对的,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消失。

你可以学习jquery here .这是值得肯定的。在开始使用jquery之后,我很少再使用纯javascript。

Keltex 15 年前

你真的应该看看一个javascript库,比如 jquery .

alemjerus 15 年前

您陷入了一个常见的JS关闭错误中。试试这个:

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

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

raveren 15 年前

    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
    }

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

5 月前

Alex · 在轻量级中同时解构和不解构变量

5 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前