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();
    })
});

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

Answer 2

使用jquery的正确实例是

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

Answer 3

onclick不是jquery函数。您正在向jQuery对象添加一个名为onclick的新函数。你应该做这样的事情：

$("#news-updates").on('click', function () {
  $("#news-content").toggle();
  $("#instruction").toggle();
});

Jquery onclick没有做任何事情

3 个答案: