Javascript jQuery`.click（）`不工作

我无法将函数放入

。请单击（）

以完全执行。如果我把

alert（“Hello”）在块之前，它会发出警报，但其余的不会执行

我希望当我单击一个div
#loginPopTrigger
时，另一个div
#loginpop
淡入。然后，如果我单击
#loginpop
或
#closelogin
，
#loginpop
会淡出

提前谢谢

以下是我现在掌握的代码：

HTML

JS

    /*-----------------------------------------  BASIC  --------------------------------------*/
@font-face {
    font-family: main;
    src: url(Fonts/MGNORMAL.TTF);
}

a:link, a:visited {
    color: #fff;
    text-decoration: none;
}

body {
    margin: auto;
    width: 100%;
    background-color: #2a2a2a;
}

/*-----------------------------------------  HEADER  --------------------------------------*/

#HeaderContainer {
    position: relative;
    height: 5%;
    top: 2.5%;
    left: 5%;
    width: 90%;
}

#loginPopTrigger {
    position: absolute;
    font-family: main;
    font-size: 20;
    list-style: none;
    color: #fff;
    font-size: 18;
    left: 90%;
    top: 28%;
    cursor: pointer;
}

#loginPopTrigger:hover {
    opacity: 0.4;
}

/*-----------------------------------------  LOGIN POPUP  --------------------------------------*/

#loginpop {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    background-color: rgb(242, 242, 242);
    height: 100%;
    width: 100%;
}

#loginContainer {
    position: absolute;
    width: 16%;
    height: 20%;
    left: 42%;
    top: 35%;
    font-family: main;
    color: #2a2a2a;
}

#title{
    font-size: 35;
    width: 100%;
    text-align: center;
}

#forgot {
    position: absolute;
    font-family: roboto;
    color: #2a2a2a;
    font-size: 14;
    top: 129;
    left: 80%;
}

#LoginPageOptions{
    width: 100%;
    position: absolute;
    top:;
}

#staylogged {
    position: absolute;
    left: 0;
    --paper-checkbox-checked-color: var(--paper-black-500);
    --paper-checkbox-checked-ink-color: var(--paper-black-500);
}

#googlelogin {
    position: absolute;
    top: 0;
    right: 0;
}

#LoginPageButtons{
    position: absolute;
    top: 100%;
    width: 100%;
}

#loginButton {
    position: absolute;
    left: 20%;
    background: #000;
    color: #fff; 
}

#signupbutton {
    position: absolute;
    right: 20%;
}

/*--  CLOSE LOGIN POPUP  --*/
#closelogin {
    width: 40px;
    height: 40px;
    position: relative;
    top: 2.6%;
    left: 97%;
    cursor: pointer;
}   

#closelogin span {
    position: absolute;
    height: 1px;
    width: 20;
    background: #000;
    margin: 24%;
}

#closelogin span:nth-child(1) {
    top: 10;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

#closelogin span:nth-child(2) {
    top: 10;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

$(document).ready(function () {
    $('#loginPopTrigger').click(function () {
        alert("Hello"); //This executes
        $('#loginpop').fadeToggle(); //This does not
    });

    $("#closelogin").click(function () {
        $('#loginpop').fadeToggle();
    });

    $("#loginpop").click(function () {
        $(this).fadeToggle();
    });
});

id
错误：

$('#loginPopTrigger').click(function () {
    $('#loginPop').fadeToggle(); //This does not
});

$("#closelogin").click(function () {
    $('#loginPop').fadeToggle();
});


$("#loginPop").click(function () {
    $(this).fadeToggle();
});

较短的路径

$('#loginPopTrigger, #closelogin, #loginPop').click(function () {
    $('#loginPop').fadeToggle();
});

id
错误：

$('#loginPopTrigger').click(function () {
    $('#loginPop').fadeToggle(); //This does not
});

$("#closelogin").click(function () {
    $('#loginPop').fadeToggle();
});


$("#loginPop").click(function () {
    $(this).fadeToggle();
});

较短的路径

$('#loginPopTrigger, #closelogin, #loginPop').click(function () {
    $('#loginPop').fadeToggle();
});

像这样更改脚本的顺序

<script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
<script type="text/javascript" src="../js/Java.js"></script>



因为如果
webcomponents.js
中的任何函数使用jquery，它将抛出一个错误。
像这样更改脚本的顺序

<script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
<script type="text/javascript" src="../js/Java.js"></script>



因为如果
webcomponents.js
中的任何函数使用jquery，它将抛出一个错误。
您使用了错误的ID（您忘记了驼峰大小写）。另外，应该使用on（）方法而不是click（）：

您使用了错误的ID（您忘记了骆驼箱）。另外，应该使用on（）方法而不是click（）：

看起来ID不一样。在html中是
loginPop
，在js中是
loginPop
。它们区分大小写，因此有时很容易漏掉。查看下面的jsfiddle

看起来ID不一样。在html中是
loginPop
，在js中是
loginPop
。他们对案件很敏感，所以有时很容易错过。查看下面的jsfiddle

什么是webcomponents.js？控制台中是否有错误？id loginPop！=LoginPowWhat是webcomponents.js？控制台中是否有任何错误？id loginPop！=登录成功了！但是你所说的
id
错误是什么意思？这样我以后就可以避免这个错误了。你在登录时忘记了大写字母p，这就成功了！但是你所说的
id
错误是什么意思？只是为了避免将来出现错误。你在loginPop中忘记了大写字母p