JS: Click h1 to set display to none at another div_问答_开发者

JS: Click h1 to set display to none at another div

开发者 https://www.devze.com 2022-12-17 06:36 出处：网络

I\'m very new in scripting with js. My question is, how can i set an onclick at an h1, which set the display to none at another div?

相关专题：css javascript

I'm very new in scripting with js. My question is, how can i set an onclick at an h1, which set the display to none at another div?

Here my code:

var iter;

        function toggleGroups()
        {
            function getAllGroups()
            {
                titlebars = document.getElementsByClassName('titlebar_js');
                g开发者_JAVA百科roupfields = 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
        }

It doesn't work.

Hey, the other guy is right, jQuery is great for solving this very quickly. Example:

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

Here you are telling the browser to grab any h1 tag and make the divs with class "toBeHidden" to disappear.

You can learn bout jQuery here. It is worth it for sure. I rarely use pure javascript again after having started with jQuery.

You really should look at a javascript library such as jquery.

You have trapped into a common JS closure bug. Try this:

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

Here you can read more about using closures and event handlers: http://www.webreference.com/programming/javascript/rg36/

    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
    }