javascript - Jquery onclick 不执行任何操作

Question

虽然我确信答案一定非常简单和明显，但我一生都无法弄清楚。请原谅这个新手。

我的 js 文件中有以下代码:

$("#news-updates").onclick = function () {
    $("#news-content").toggle();
    $("#instruction").toggle();
}

该代码的目的是隐藏一个对象(指令)并显示另一个对象(新闻内容)，然后在下次单击时执行相反的操作。这是 HTML:

<section class = "news-updates" id = "news-updates">
    <h2>News & Updates</h2>
    <p id = "instruction">Tap here to open</p>
    <div id = "news-content">Lorem ipsum</div>
</section>

如果它有某种相关性，CSS:

#news-updates {
    margin-top: 20px;
    display: inline-block;
    border: 2px solid #ECECEC;
    float: right;
    width: 88%;
    margin-left: 5%;
    margin-right: 5%;
    h2 {
        text-align: center;
        font-size: 20px;
    }
    #instruction {
        text-align: center;
        display: block;
    }
    #news-content {
        display: none;
    }
}

当我单击该部分时，没有任何反应。连鼠标都没变。请问，我该如何进行这项工作？

Answer 1

应该是

$(window).load(function() {
    $("#news-updates").click(function () {
        $("#news-content").toggle();
        $("#instruction").toggle();
    })
});

正如您所做的那样，当您使用 jQuery 时，直接分配是针对纯 javascript 的。另外，函数应该在 DOM 加载时分配，所以我添加了 onload 方法。