getElementById& onclick按钮功能无效

时间:2013-03-03 13:39:52

标签: javascript jquery onclick getelementbyid

非常感谢wiz kid& Axel Martinez!问题解决了!

以这种方式运作:

$(document).ready(function() {
    $("#info").on('click', function() {
        $(".infos").toggleClass("infos_sichtbar");
    });

我正在尝试使用带有getElementById的按钮, 但它不起作用:(

该脚本适用于WebApplikation,它将是由PhoneGap转换的本机应用程序。 我想用脚本更改元素的CSS类,以便我的div“infos”可见。它适用于此脚本:

    <script>
    $(document).ready(function() {
        $("button").on('click', function() {
            $(".infos").toggleClass("infos_visible");
        })
    });

    </script>

但问题是,有两个按钮,一个用于信息,通过点击可以看到,一个用于法律通知......

我试图让它以这种方式运作:

第一次尝试:

$(document).ready(function() {
        $.getElementById("info").on('click', function() {
            $(".infos").toggleClass("infos_sichtbar");
        })
    });

第二次尝试:

 $(document).ready(function() {
        $.getElementById("info").onclick = function() {
            $(".infos").toggleClass("infos_sichtbar");
                    }
                 /* $.getElementById("legalnotice").onclick = function() {
            $(".legalnotice").toggleClass("legalnotice_sichtbar");
        }*/
    });

当我使用脚本时,点击按钮不会做任何事情。

编辑:

HTML代码:

<body>

<div class="infos">Blub blub blub blub blub blub blub blub</div>

<header>
    <h1>App</h1>
</header>
<section>
    <h1>welcome!</h1>
    <p class="einleitung">intro</p>
<aside>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</aside><button id="info">Infos</button><button id="impress">Impressum</button>
</section>
<script src="zepto.js"></script>
<script src="app.js"></script>
<script>
window.scrollTo(0,1);
</script>

该脚本使用app.js文件实现。

2 个答案:

答案 0 :(得分:2)

尝试使用

$("#info") 

而不是

$.getElementById("info")

$(document).ready(function() {
        $("#info").on('click', function() {
            $(".infos").toggleClass("infos_sichtbar");
        });
});

答案 1 :(得分:1)

如果您使用的是jQuery,为什么不使用像

这样的选择器
$(document).ready(function() {
    $("#info").click(function() {
        $(".infos").toggleClass("infos_sichtbar");
    });
});