如何在警报框关闭后将按钮的文本更改为“禁止注册！
How to change the text of the button to say "No Sign Ups!" after alert box is closed?
jQuery的新功能，我需要在警报框关闭后更改"立即注册"按钮的文本。从伪代码的角度来看，似乎我应该创建一个在警报框关闭后运行的函数。我已经从我自己的猜测和谷歌搜索中尝试了很多事情，但似乎没有任何效果。任何帮助将不胜感激！
这是我的 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();
});
相关文章：
- 如何使用jquery在填充自动完成的值后使文本框只读
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 用程序搜索JQuery数据表中的文本
- jQuery匹配JSON对象的部分文本
- onkeyup无法动态创建多个文本区域
- 如何在下面的ES6循环中获得前面的文本
- 如何在警报框关闭后将按钮的文本更改为“禁止注册！
- 禁止页面上所有文本区域的字符
- 禁止使用JQuery在表单中的所有文本框上剪切、复制、粘贴
- 如何允许在禁止选择的帖子上选择一些文本
- 如何使用 JQuery 禁止显示文本
- 禁止滚动文本
- 在输入了一定数量的字符后，禁止用户在文本区域字段中输入文本
- 禁止提交空白输入和文本区域
- 如何禁止在文本框中粘贴特殊字符
- 禁止输入进入文本区域
- orbitControl禁止在Ruby on rails中编写文本框
- 除非选中复选框，否则禁止在文本框中输入文本
- 如何在文本框中使用javascript删除或禁止特定的字符或符号
