jQuery 新手，我需要在警告框关闭后更改“立即注册”按钮的文本。从伪代码的 Angular 来看，似乎我应该创建一个在关闭警报框后运行的函数。我根据自己的猜测和谷歌搜索尝试了很多事情，但似乎没有任何效果。任何帮助将不胜感激!
这是我的 HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<title>Relaxr Blog Page</title>
<meta name="description" content="Relaxr Landing Page"/>
<meta name="keywords" content="relaxing, blog, tech startup, email, reply, meetings"/>
<meta name="author" content="Chantel Zapata"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,300,600,800' rel='stylesheet' type='text/css'>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
</head>
<body>
<!-- HEADER -->
<header class="header ">
<div class="headercontainer">
<h1 class="fl">Relaxr</h1>
<nav class="main-nav fr">
<ul>
<li class="nav-element">About</li>
<li class="nav-element">FAQ</li>
<li class="nav-element">Team</li>
<li class="nav-element">Contact Us</li>
<li class="nav-element">Blog</li>
</ul>
</nav>
</div>
</header>
<div class="content">
<!-- BLOG AREA -->
<div class="blog-area fl clearfix:after">
<div class="">
<h2>How I implemented Relaxr in 2 weeks and changed my life.<h2>
<img src="images/blog_photo1.jpg" alt="Rowers" height="280" width="700"/>
<p class="introduction">L</p><p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at lobortis lectus. Proin faucibus nibh vitae purus elementum convallis. Quisque sagittis viverra facilisis. Nullam lobortis blandit lorem, at convallis arcu eleifend at. Nullam rhoncus, lacus at laoreet venenatis, ante orci ultrices felis, sed tempor nisi lorem at tortor. Proin vitae risus et felis interdum maximus. Mauris ac sollicitudin tortor, sit amet egestas nibh.</p>
<p class="additionaltext1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at lobortis lectus. Proin faucibus nibh vitae purus elementum convallis. Quisque sagittis viverra facilisis. Nullam lobortis blandit lorem, at convallis arcu eleifend at. Nullam rhoncus, lacus at laoreet venenatis, ante orci ultrices felis, sed tempor nisi lorem at tortor. Proin vitae risus et felis interdum maximus. Mauris ac sollicitudin tortor, sit amet egestas nibh.</p>
<a class="blog-link read-more1 fr">Read more ></a>
<a class="blog-link read-less1 fr">Read less ></a>
<!-- I just selected a random blog link for now-->
</div>
<div class="divider">
</div>
<div>
<h2>I traveled across the globe thanks to Relaxr’s Excel auomation<h2>
<img src="images/blog_photo2.jpg" alt="Boats" height="280" width="700"/>
<p class="introduction">L</p><p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at lobortis lectus. Proin faucibus nibh vitae purus elementum convallis. Quisque sagittis viverra facilisis. Nullam lobortis blandit lorem, at convallis arcu eleifend at. Nullam rhoncus, lacus at laoreet venenatis, ante orci ultrices felis, sed tempor nisi lorem at tortor. Proin vitae risus et felis interdum maximus. Mauris ac sollicitudin tortor, sit amet egestas nibh.</p>
<p class="additionaltext2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at lobortis lectus. Proin faucibus nibh vitae purus elementum convallis. Quisque sagittis viverra facilisis. Nullam lobortis blandit lorem, at convallis arcu eleifend at. Nullam rhoncus, lacus at laoreet venenatis, ante orci ultrices felis, sed tempor nisi lorem at tortor. Proin vitae risus et felis interdum maximus. Mauris ac sollicitudin tortor, sit amet egestas nibh.</p>
<a class="blog-link read-more2 fr">Read more ></a>
<a class="blog-link read-less2 fr">Read less ></a>
<!-- I just selected a random blog link for now-->
</div>
<div class="divider">
</div>
</div>
<!-- SIDE BAR -->
<aside class="side-bar fr clearfix:after">
<div>
<h3>Categories</h3>
<ul class="side-bar-list">
<li class="side-bar-nav">Success stories</li>
<li class="side-bar-nav">Stats</li>
<li class="side-bar-nav">How tos</li>
<li class="side-bar-nav">Best of</li>
<li class="side-bar-nav">Business tips</li>
</ul>
</div>
<div>
<h3>About Relaxr</h3>
<p class="about-descrip">Proin vitae risus et felis interdum maximus. Mauris ac sollicitudin tortor, sit amet egestas nibh.<span class="learn-more-text">Mauris ac sollicitudin tortor, sit amet egestas nibh!</span></p>
<a class="learn-more">Learn more</a>
<!-- I just selected a random blog link for now-->
</div>
<img class="ad-unit" src="images/ad-unit.png" alt="Ad Unit" height="546" width="240"/>
</aside>
</div>
<!-- SIGN UP -->
<div class="bar clear">
<a href="#" class="signupnow">Sign Up Now!</a>
<!-- I just selected a random link that was "relaxing" for now-->
</div>
<!-- FOOTER -->
<footer>
<h4>Relaxr</h4>
<br />
<a href="https://twitter.com/" class="social"> <img src="images/twitter.png" alt="Twitter Icon"></a>
<a href="https://facebook.com/" class="social"> <img src="images/facebook.png" alt="Facebook Icon"></a>
<br />
<p>Copyright 2015. Relaxr.</p>
</footer>
<script src="js/index.js"></script>
</body>
</html>
还有我的 CSS:
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.fr {
float: right;
}
.fl {
float: left;
}
/******************************************
/* ADDITIONAL STYLES
/*******************************************/
body {
font-family: 'Open Sans', Arial, sans-serif;
margin: 0 auto;
background-color: #f0efef;
}
h1 {
font-weight: 800;
font-size: 48px;
color: #fff;
text-align: left;
}
h4 {
font-weight: 800;
font-size: 48px;
color: #f9e42e;
margin: 0px;
padding-bottom: 40px;
}
.bar {
background-color: #f9e42e;
padding-top: 60px;
padding-bottom: 60px;
text-align: center;
margin: 0 auto;
}
.signupnow {
color: #fff;
font-size: 24px;
font-weight: 800;
padding: 11px 56px 11px 56px;
background: #033048;
border-radius: 5px;
text-decoration: none;
text-align: center;
}
footer {
text-align: center;
background-color: #121212;
padding-top: 60px;
padding-bottom: 60px;
margin: 0 auto;
}
footer p {
color: #fff;
font-size: 18px;
font-weight: 600;
padding-left: 25px;
padding-right: 25px;
padding-top: 40px;
}
footer a {
padding-left: 25px;
padding-right: 25px;
}
.content {
width: 960px;
margin: 0 auto;
}
/* Header */
header {
height: 120px;
background-color: #033048;
}
header nav ul {
list-style: none;
}
.nav-element {
margin-left: 15px;
margin-top: 30px;
display: inline-block;
font-size: 24px;
font-weight: 600;
color: #f9e42e;
}
.headercontainer {
width: 960px;
margin: 0 auto;
}
/* Blogs */
.blog-area {
width: 700px;
float: left;
overflow: hidden;
margin-right: 20px;
margin-top: 50px;
margin-bottom: 70px;
}
h2 {
font-size: 40px;
font-weight: 600px;
color: #033048;
}
p {
font-size: 24px;
line-height: 28px;
font-weight: 300px;
color: #606161;
}
.blog-link {
font-size: 24px;
font-weight: 600;
margin-top: 40px;
margin-bottom: 40px;
text-decoration: none;
color: #033048;
}
.divider {
height: 1px;
width: 700px;
background-color: #606161;
margin-top: 160px;
margin-bottom: 40px;
}
p.introduction:first-letter {
font-size: 380%;
float: left;
width: 1em;
padding-right: 10px;
padding-top: 28px;
padding-bottom: 20px;
padding-left: 0;
font-weight: 600;
}
.additionaltext1 {
display: none;
}
.additionaltext2 {
display: none;
}
.read-less1 {
display: none;
}
.read-less2 {
display: none;
}
/* Side Bar */
.side-bar {
width: 240px;
overflow: hidden;
margin-left: 0;
margin-top: 50px;
}
h3 {
font-size: 32px;
font-weight: 800;
color: #033048;
}
.side-bar-list {
font-size: 24px;
font-weight: 300;
color: #033048;
list-style: none;
text-align: left;
padding-left:0;
}
.learn-more {
font-size: 24px;
font-weight: 600;
color: #033048;
margin-bottom: 100px;
text-decoration: none;
}
.about-descrip {
font-size: 22px;
font-weight: 300;
color: #033048;
text-align: left;
}
.side-bar-list {
display: table;
}
.ad-unit {
margin-top: 40px;
}
.learn-more-text {
display: none;
}
还有我的 jQuery:
$('.signupnow')
.on('click', function (){
alert("We are not currently taking sign ups");
});
$('.read-more1').on('click',function (){
$('.additionaltext1').slideDown();
});
$('.read-more2').on('click',function (){
$('.additionaltext2').slideDown();
});
$('.learn-more').on('click',function (){
$('.learn-more-text').slideDown();
});
最佳答案
正如@ThisOneGuy 所说:
$('.signupnow')
.on('click', function (){
alert("We are not currently taking sign ups");
$(button).text('no signs up');
});
$('.read-more1').on('click',function (){
$('.additionaltext1').slideDown();
});
$('.read-more2').on('click',function (){
$('.additionaltext2').slideDown();
});
$('.learn-more').on('click',function (){
$('.learn-more-text').slideDown();
});
关于javascript - 警告框关闭后如何将按钮的文本更改为 "No Sign Ups!"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35421581/