jQuery` .click()`无法正常工作

时间:2015-06-26 14:05:08

标签: javascript jquery html css

我无法让tell application "Finder" set theFiles to files of folder POSIX file "/Volumes/Assets/BLG.com Images/Images for Renaming/Photoshop Files" as list end tell repeat with f in theFiles tell application "Adobe Illustrator" activate open f with options {class:Photoshop options, preserve hidden layers:true, preserve layers:true} without dialogs set allLayers to layers of document 1 set allImages to page items of document 1 repeat with lay in allLayers set visible of lay to true end repeat repeat with img in allImages set scaleMatrix to get scale matrix horizontal scale 416 vertical scale 416 transform img using scaleMatrix end repeat selectobjectsonactiveartboard document 1 delay 2 do script "Fit Artboard to Selected" from "Fit Artboard" set visible of layer 2 of document 1 to false set visible of layer 4 of document 1 to false delay 2 do script "Raw Copper Save" from "RC" set visible of layer 5 of document 1 to false delay 2 do script "Architectural Copper Save" from "AR" set visible of layer 6 of document 1 to false delay 2 do script "Satin Antique Save" from "SA" set visible of layer 7 of document 1 to false delay 2 do script "Brushed Nickel Save" from "BN" set visible of layer 8 of document 1 to false delay 2 do script "Polished Nickel Save" from "PN" set visible of layer 10 of document 1 to false set visible of layer 9 of document 1 to false delay 2 do script "Antique Copper Save" from "AC" set visible of layer 11 of document 1 to false delay 2 do script "Verdigris Patina Save" from "VG" set visible of layer 12 of document 1 to false delay 2 do script "Satin Verdigris Patina Save" from "SV" set visible of layer 13 of document 1 to false set visible of layer 2 of document 1 to true delay 2 do script "Black Save" from "BK" set visible of layer 14 of document 1 to false set visible of layer 2 of document 1 to false set visible of layer 15 of document 1 to false delay 2 do script "Default Save" from "Default" delay 2 save document 1 in "/Volumes/Assets/BLG.com Images/Images for Renaming/Illustrator Files" as Illustrator delay 2 close document 1 end tell end repeat 内的函数完全执行。如果我在阻止之前放置.click(),它会发出警报但其他人不会执行...

我希望当我点击div alert("Hello");时,另一个div #loginPopTrigger淡出。然后,如果我点击#loginpop#loginpop#closelogin就会淡出。

提前致谢!

以下是我现在的代码:

HTML

#loginpop

CSS

<head>
    <title>MainFrame</title>

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

    <link href="stylesheets/Index.css" rel="stylesheet" type="text/css"/>

    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="../bower_components/iron-input/">
    <link rel="import" href="../bower_components/paper-button/paper-button.html">
    <link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
    <link rel="import" href="../bower_components/paper-input/paper-input.html">
</head>

<body>

    <div id="HeaderContainer">        
        <div id="loginPopTrigger">
            <li>Login</li>
        </div>
    </div>        

    <div id="loginPop">
        <div id="closelogin">
            <span></span>
            <span></span>
        </div>
        <div id="loginContainer">
            <div id="title">
                <div id="logologin"></div>...
            </div>

            <paper-input label="Email Address or ID" floatinglabel></paper-input>
            <paper-input type="password" label="Password" floatinglabel></paper-input>

            <div id="forgot">Forgot?</div>
            <div id="LoginPageOptions">
                <paper-checkbox id="staylogged">Stay Logged On</paper-checkbox>
                <div id="googlelogin">Login with Google+</div>
            </div>
            <div id="LoginPageButtons">
                <paper-button id="loginButton" raised>Login</paper-button>
                <paper-button id="signupbutton" raised>Sign Up</paper-button>
            </div>
        </div>
    </div>

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

4 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:2)

更改此类脚本的顺序。

<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,它将引发错误。

答案 2 :(得分:0)

您使用了错误的ID(您忘记了骆驼案)。此外,您应该使用on()方法而不是click():

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

答案 3 :(得分:0)

看起来ids不一样。在html中它是loginPop,在js中它是loginpop。它们区分大小写,所以有时很容易错过。看看下面的jsfiddle。

https://jsfiddle.net/c6ojsb6c/1/

相关问题