jQuery 单击链接时切换文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17722229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle text when link is clicked
提问by egr103
I have the below code that toggles a div (called #extra) into view:
我有以下代码可以将 div（称为#extra）切换到视图中：
$('#more').click(function() {
$('#extra').slideToggle('fast');
return false;
});
My click function is this link:
我的点击功能是这个链接：
<a href="#" id="more">More about us</a>
How do I get that 'More about us' text to change to read 'Less about us' when the #extradiv is visible? When the same link is clicked to hide the div, I'd like the text of the link to change back to read 'More about us'.
当#extradiv 可见时，如何将“更多关于我们”的文本更改为“关于我们的更少” ？当单击同一个链接隐藏 div 时，我希望链接的文本改回阅读“更多关于我们”。
回答by Nishu Tayal
Use this code :
使用此代码：
$('#more').click(function() {
jQuery(this).text('less about us');
if($('#extra').is(':visible')){
jQuery(this).text('Less about us');
}else{
jQuery(this).text('More about us');
}
$('#extra').slideToggle('fast');
return false;
});
Here is the demo : http://jsfiddle.net/AAFaY/
这是演示：http: //jsfiddle.net/AAFaY/
回答by adeneo
Just toggle the text ?
只是切换文本？
$('#more').click(function() {
$('#extra').slideToggle('fast');
$('#more').text(function(_,txt) {
var ret='';
if ( txt == 'More about us' ) {
ret = 'Less about us';
$(this).css('background','url(link/to/image1.png)');
}else{
ret = 'More about us';
$(this).css('background','url(link/to/image2.png)');
}
return ret;
});
return false;
});
回答by Dinesh
回答by Bobex Stojanovic
Yes, for this Dinesh's solution is probably most eficient end elegant in jQuery, for hure
是的，对于这个 Dinesh 的解决方案可能是 jQuery 中最有效的最终优雅，对于 hure
$(document).ready(function() {
$('#more').click(function() {
var s = $(this);
$('#extra').slideToggle('fast', function() {
s.html(s.text() == 'More..' ? 'Less..' : 'More..');
});
return false;
});
});#wrapp {
height: 38vh;
width: 40vw;
margin: 50px 50px;
left: 10%;
background-color: blue;
position: absolute;
}
#wrapp #more {
display: inline-block;
padding: 5px;
background: yellow;
}
#extra {
height: 100px;
width: 250px;
position: relative;
margin: 1.2vh auto;
}
#extra p {
position: relative;
color: red;
text-align: center;
vertical-align: center;
padding-top: 3.6vh;
font-size: 2.5em;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<body>
<div id="wrapp">
<header>
<h1>Heading...</h1>
</header>
<a href="#" id="more">Less..</a>
<div id="extra"><p>Whatewer...</p></div>
</div>
</body>回答by Bobex Stojanovic
$(document).ready(function() {
$('#more').click(function() {
var s = $(this);
$('#extra').slideToggle('fast', function() {
s.html(s.text() == 'More..' ? 'Less..' : 'More..');
});
return false;
});
});#wrapp {
height: 38vh;
width: 40vw;
margin: 50px 50px;
left: 10%;
background-color: blue;
position: absolute;
}
#wrapp #more {
display: inline-block;
padding: 5px;
background: yellow;
}
#extra {
height: 100px;
width: 250px;
position: relative;
margin: 1.2vh auto;
}
#extra p {
position: relative;
color: red;
text-align: center;
vertical-align: center;
padding-top: 3.6vh;
font-size: 2.5em;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<body>
<div id="wrapp">
<header>
<h1>Heading...</h1>
</header>
<a href="#" id="more">Less..</a>
<div id="extra"><p>Whatewer...</p></div>
</div>
</body>$(document).ready(function() {
$('#more').click(function() {
var s = $(this);
$('#extra').slideToggle('fast', function() {
s.html(s.text() == 'More..' ? 'Less..' : 'More..');
});
return false;
});
});#wrapp {
height: 38vh;
width: 40vw;
margin: 50px 50px;
left: 10%;
background-color: blue;
position: absolute;
}
#wrapp #more {
display: inline-block;
padding: 5px;
background: yellow;
}
#extra {
height: 100px;
width: 250px;
position: relative;
margin: 1.2vh auto;
}
#extra p {
position: relative;
color: red;
text-align: center;
vertical-align: center;
padding-top: 3.6vh;
font-size: 2.5em;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<body>
<div id="wrapp">
<header>
<h1>Heading...</h1>
</header>
<a href="#" id="more">Less..</a>
<div id="extra"><p>Whatewer...</p></div>
</div>
</body>回答by elad silver
I would actually suggest using jquery to only toggle the class name and have css toggle the text as such:
我实际上建议使用 jquery 只切换类名并让 css 像这样切换文本：
$('.btn').click(function(){
$(this).toggleClass('active');
});.btn::before{
content:"Show";
}
.btn.active::before{
content:"Hide";
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class='btn'></a>