试图通过JQuery消除Div？

时间：2015-05-07 00:33:36

标签： javascript jquery html css

我首先收到了一条弹出式消息，我希望它在您点击按钮时消失。问题是，当你点击按钮时，它不会消失。这是代码：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>GEOMETRY</title>
        <link rel="stylesheet" href="infographic.css"/>
        <script src="jquery-1.11.2.js"></script>
        <script src="jquery-ui.js"></script>
    </head>
    <body>
        <div id="alert">
            <p id="bef">BEFORE WE BEGIN...</p>
            <p class="bef2">I started this site way too late to test on multiple browsers. What this means is, if you're not viewing on Chrome, things may be very different. I'm primarily concerned about the fonts. You'll still be able to read it, but it could very well be all in Sans-Serif. Which will hinder your user experience. So keep that in mind.</p>
            <p class="bef2">Also, I didn't make this thing very supportive of different screen sizes. It should be relatively fine across the board, because all margins are percentages, but there are extremes where things get ugly. Keep that in mind also.</p>
            <p class="bef2">Enjoy!</p>
            <div id="igotya">
                <p class="menu">I got ya bro.</p>
            </div>
        </div>

        <p class="h1">GEOMETRY</p>
        <p class="sub">Everything you never wanted to know.</p>
        <p class="mainp">You now when you try to re-visit your high school days, but you just can't? Like when you say to yourself, "Man, I really wish I was sitting in a high school classroom learning trigonometry right now," or, "Jesus, if only I could get someone to give me a bunch of work to do, on topics I'll never remember."</p>
        <p class="mainp">Well now, you've got a complete guiding resource to do it yourself!</p>
        <p class="mainp">Mostly...</p>
        <p class="mainp">This will give you all the information you always wish you never knew about four basic geometry concepts. Know exactly what  you're looking for? Use the buttons to skip ahead.</p>

        <div id="simp">
            <p class="menu">Simplifying Radicals</p>
        </div>
        <div id="pyth">
            <p class="menu">Pythagorean Theorem</p>
        </div>
        <div id="down">
            <div id="arrow"></div>
        </div>
        <div id="sp">
            <p class="menu">Special Triangles</p>
        </div>
        <div id="trig">
            <p class="menu">Trigonometry</p>
        </div>

        <script type="text/javascript">
            var igotya = $("#igotya");
            var box = $("#alert");

            igotya.click = (function() {
                alert("Hello!");
                box.css("position", "none");
            });
        </script>
    </body>
</html>

CSS：

@font-face {font-family: Hip Light; src: url("Fonts/Hipstelvetica UltraLight.ttf");}

body {
    background: #962626;
}

#alert {
    position: absolute;
    display: inline;
    z-index: 2;
    background: #962626;
    width: 60%;
    margin-top: 60px;
    margin-left: 20%;
    border: 3px solid white;
    border-radius: 30px;
    text-align: center;
}

#bef {
    color: white;
    font-family: Courier, Courier New, sans-serif;
    font-size: 65px;
    margin-bottom: 0px;
    margin-top: 10px;
}

.bef2 {
    color: white;
    font-family: Courier, Courier New, sans-serif;
    margin-left: 10%;
    margin-right: 10%;
}

#igotya {
    float: left;
    width: 15%;
    margin-left: 42.5%;
    border: 2px solid white;
    border-radius: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
    transition: border .5s, color 0.5s;
    -webkit-transition: border .5s, color 0.5s;
    cursor: pointer;
    color: white;
}

#igotya:hover {
    border: 2px solid #721515;
    color: #721515;
}

.h1 {
    text-align: center;
    color: white;
    font-family: Hip Light, Courier, Courier New, sans-serif;
    font-size: 100px;
    margin-bottom: 0px;
    margin-top: 70px;
    text-decoration: underline;
}

.sub {
    text-align: center;
    color: white;
    font-family: Courier, Courier New, sans-serif;
    margin-top: 0px;
    margin-bottom: 50px;
    font-size: 20px;
}

.mainp {
    text-align: center;
    color: white;
    font-family: Courier, Courier New, sans-serif;
    margin-left: 20%;
    margin-right: 20%;
}

#simp {
    height: 50px;
    width: 15%;
    float: left;
    margin-left: 6%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
    transition: background .5s, color .5s;
    -webkit-transition: background 1s, color 1s;
    cursor: pointer;
    color: white;
}

#simp:hover {
    background: white;
    color: #962626;
}

#pyth {
    height: 50px;
    width: 15%;
    float: left;
    margin-left: 2%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
    transition: background .5s, color .5s;
    -webkit-transition: background .5s, color .5s;
    cursor: pointer;
    color: white;
}

#pyth:hover {
    background: white;
    color: #962626;
}

#down {
    height: 80px;
    width: 6%;
    float: left;
    margin-left: 9%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
    transition: border .5s;
    -webkit-transition: border .5s;
}

#down:hover {
    border: 2px solid #962626;
}

#arrow {
    height: 40px;
    width: 40px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(45deg);
    margin-left: 20px;
    margin-top: 10px;
}

#sp {
    height: 50px;
    width: 15%;
    float: right;
    margin-right: 6%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
    transition: background .5s, color .5s;
    -webkit-transition: background .5s, color .5s;
    cursor: pointer;
    color: white;
}

#sp:hover {
    background: white;
    color: #962626;
}

#trig {
    height: 50px;
    width: 15%;
    float: right;
    margin-right: 2%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
    transition: all .5s;
    -webkit-transition: all .5s;
    cursor: pointer;
    color: white;
}

#trig:hover {
    background: white;
    color: #962626;
}

.menu {
    text-align: center;
    font-family: Courier, Courier New, sans-serif;
}

我已链接到JQuery。我想要消失的div是#alert，当你点击#igotya时我希望它消失。如您所见，我还设置了一个警告框，以判断该功能是否正在触发。警告框不弹出，所以它必须是触发的问题（可能只是一个错字，但对于我的生活，我无法找到它）。想法，任何人？

3 个答案:

答案 0 :(得分：2)

2件事，1）.click()是一个函数，所以你需要将处理程序作为参数传递给该函数，2）隐藏元素调用.hide() 

var igotya = $("#igotya");
var box = $("#alert");

igotya.click(function () {
    alert("Hello!");
    box.hide();
});

演示：Fiddle

答案 1 :(得分：0)

您可以使用此脚本，它可以正常工作。

$("#igotya").click(function(){ 
    $("#alert").hide();
});

答案 2 :(得分：0)

如果我说得对，当客户点击'#igotya'按钮时，你不再需要这个警告，所以你可以删除它：

var igotya = $("#igotya");

$(igotya).click(function(){
    $('#alert').remove();
});


var igotya = $("#igotya");

$(igotya).click(function(){
    $('#alert').remove();
});
@font-face {font-family: Hip Light; src: url("Fonts/Hipstelvetica UltraLight.ttf");}

body {
    background: #962626;
}

#alert {
    position: absolute;
    display: inline;
    z-index: 2;
    background: #962626;
    width: 60%;
    margin-top: 60px;
    margin-left: 20%;
    border: 3px solid white;
    border-radius: 30px;
    text-align: center;
}

#bef {
    color: white;
    font-family: Courier, Courier New, sans-serif;
    font-size: 65px;
    margin-bottom: 0px;
    margin-top: 10px;
}

.bef2 {
    color: white;
    font-family: Courier, Courier New, sans-serif;
    margin-left: 10%;
    margin-right: 10%;
}

#igotya {
    float: left;
    width: 15%;
    margin-left: 42.5%;
    border: 2px solid white;
    border-radius: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
    transition: border .5s, color 0.5s;
    -webkit-transition: border .5s, color 0.5s;
    cursor: pointer;
    color: white;
}

#igotya:hover {
    border: 2px solid #721515;
    color: #721515;
}

.h1 {
    text-align: center;
    color: white;
    font-family: Hip Light, Courier, Courier New, sans-serif;
    font-size: 100px;
    margin-bottom: 0px;
    margin-top: 70px;
    text-decoration: underline;
}

.sub {
    text-align: center;
    color: white;
    font-family: Courier, Courier New, sans-serif;
    margin-top: 0px;
    margin-bottom: 50px;
    font-size: 20px;
}

.mainp {
    text-align: center;
    color: white;
    font-family: Courier, Courier New, sans-serif;
    margin-left: 20%;
    margin-right: 20%;
}

#simp {
    height: 50px;
    width: 15%;
    float: left;
    margin-left: 6%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
    transition: background .5s, color .5s;
    -webkit-transition: background 1s, color 1s;
    cursor: pointer;
    color: white;
}

#simp:hover {
    background: white;
    color: #962626;
}

#pyth {
    height: 50px;
    width: 15%;
    float: left;
    margin-left: 2%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
    transition: background .5s, color .5s;
    -webkit-transition: background .5s, color .5s;
    cursor: pointer;
    color: white;
}

#pyth:hover {
    background: white;
    color: #962626;
}

#down {
    height: 80px;
    width: 6%;
    float: left;
    margin-left: 9%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
    transition: border .5s;
    -webkit-transition: border .5s;
}

#down:hover {
    border: 2px solid #962626;
}

#arrow {
    height: 40px;
    width: 40px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(45deg);
    margin-left: 20px;
    margin-top: 10px;
}

#sp {
    height: 50px;
    width: 15%;
    float: right;
    margin-right: 6%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
    transition: background .5s, color .5s;
    -webkit-transition: background .5s, color .5s;
    cursor: pointer;
    color: white;
}

#sp:hover {
    background: white;
    color: #962626;
}

#trig {
    height: 50px;
    width: 15%;
    float: right;
    margin-right: 2%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
    transition: all .5s;
    -webkit-transition: all .5s;
    cursor: pointer;
    color: white;
}

#trig:hover {
    background: white;
    color: #962626;
}

.menu {
    text-align: center;
    font-family: Courier, Courier New, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alert">
            <p id="bef">BEFORE WE BEGIN...</p>
            <p class="bef2">I started this site way too late to test on multiple browsers. What this means is, if you're not viewing on Chrome, things may be very different. I'm primarily concerned about the fonts. You'll still be able to read it, but it could very well be all in Sans-Serif. Which will hinder your user experience. So keep that in mind.</p>
            <p class="bef2">Also, I didn't make this thing very supportive of different screen sizes. It should be relatively fine across the board, because all margins are percentages, but there are extremes where things get ugly. Keep that in mind also.</p>
            <p class="bef2">Enjoy!</p>
            <div id="igotya">
                <p class="menu">I got ya bro.</p>
            </div>
        </div>

        <p class="h1">GEOMETRY</p>
        <p class="sub">Everything you never wanted to know.</p>
        <p class="mainp">You now when you try to re-visit your high school days, but you just can't? Like when you say to yourself, "Man, I really wish I was sitting in a high school classroom learning trigonometry right now," or, "Jesus, if only I could get someone to give me a bunch of work to do, on topics I'll never remember."</p>
        <p class="mainp">Well now, you've got a complete guiding resource to do it yourself!</p>
        <p class="mainp">Mostly...</p>
        <p class="mainp">This will give you all the information you always wish you never knew about four basic geometry concepts. Know exactly what  you're looking for? Use the buttons to skip ahead.</p>

        <div id="simp">
            <p class="menu">Simplifying Radicals</p>
        </div>
        <div id="pyth">
            <p class="menu">Pythagorean Theorem</p>
        </div>
        <div id="down">
            <div id="arrow"></div>
        </div>
        <div id="sp">
            <p class="menu">Special Triangles</p>
        </div>
        <div id="trig">
            <p class="menu">Trigonometry</p>
        </div>

相关问题
最新问题