jQuery仅在单击指定元素时才激活.click（）

Question

我试图创建一个cookie通知，一旦用户单击“同意”（或一旦添加，则取消），它将使用.slideToggle（或slideUp / Down）隐藏该元素。

当前，当您单击页面上的任意位置时，该元素将为slideToggle，而不仅仅是像我尝试的那样单击“同意”按钮时。

我正在Wordpress.org网站上执行此操作（不确定是否会影响它），而我只是在学习JavaScript / jQuery，因此如果我误解了.click或.slideToggle的工作原理，我深表歉意。

代码如下：

<style>
.test{
    display:inline-block;
    background-color:#000;
    color:#FFF;
    text-align:center;
    width:100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>

<script type="text/javascript">
    var agree=function(){getElementById("#agree")};
    $(agree).click(function(){
        $("#box").slideToggle();
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

Answer 1

这个agree函数从不返回任何东西。 var agree=function(){getElementById("#agree")}; 此外，您从不调用函数（仅将引用传递给函数）。 最后，您应该将jquery放入document ready事件中，以便在脚本运行之前加载整个页面。

试试这个javascript：

$(function() {
    $("#agree").click(function(){
        $("#box").slideToggle();
    });
});

Answer 2

问题是您尝试在元素存在之前就对事件进行连线：

<script type="text/javascript">
    $("#agree").click(function(){
        $("#box").slideToggle();
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

您无法将事件添加到尚不存在的元素中。

您可以通过多种方法解决此问题：

1在元素存在后添加代码：

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

<script type="text/javascript">
    $("#agree").click(function(){
        $("#box").slideToggle();
    });
</script>

2准备好使用的文档：

<script type="text/javascript">
    $(function() { 
        $("#agree").click(function(){
            $("#box").slideToggle();
        });
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

3使用事件委托：

<script type="text/javascript">
    $(document).on("click", "#agree", function(){
        $("#box").slideToggle();
    });
</script>

<div class="test" id="box">
    <p>We Use Cookies</p>
    <button id="agree" type="button">Agree</button>
</div>

---

当您单击页面上的任意位置时，该元素将滑动切换

发生的情况是，在var agree=function(){getElementById("#agree")}; 然后agree == null所以您要执行$(null).click(...然后将其应用于整个页面。如果将其更改为$("#agree").click(...遇到上述问题（这就是为什么您无法通过这种方式工作）