因此，我使用了一些jquery来将“ View Bio”替换为“ Hide Bio”，反之亦然。效果很好，只有我不确定如何做到这一点，以便当您在一个人的“ Hide Bio”处于活动状态时单击另一个配置文件的“ View Bio”时，另一个配置文件的“ Hide Bio”会还原为原始的“ View Bio” ”。
基本上，我只想一直说一个“ Hide Bio”（使其成为唯一的活跃生物）。
我也想要它，所以我仍然可以点击当前显示“ Hide Bio”的名称，使其显示为“ View Bio”（即所有个人资料都显示“ View Bio”）
这是一个小提琴：http://jsfiddle.net/pauljackson/2zn4X/
（编辑-更新小提琴，已实施解决方案：http://jsfiddle.net/pauljackson/2zn4X/2/）
js：
$(document).ready(function () {
$(".viewbio").click(function() {
var $self = $(this);
if ($self.text().trim() == "VIEW BIO")
$self.text("HIDE BIO");
else
$self.text("VIEW BIO");
});
});
的HTML：
<body>
<div id="ourteamslide">
<div class="maincontent">
<div class="ourteamlist">
<ul>
<li>
<img src="http://eldoradospringsmo.com/pages/wp-content/uploads/2014/07/wpid-WP_IM_1404400872566__0.jpg" class="profilepic" alt="Profile Pic">
<div class="lilbluebox">
<div class="teambox">
<ul>
<li>
<p class="whitetext">Some Dude</p>
</li>
<li>
<div class="viewbio">VIEW BIO</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<img src="http://eldoradospringsmo.com/pages/wp-content/uploads/2014/03/wpid-WP_IM_1395933210796__1.jpg" class="profilepic" alt="Profile Pic">
<div class="lilbluebox">
<div class="teambox">
<ul>
<li>
<p class="whitetext">Some Gal</p>
</li>
<li>
<div class="viewbio">VIEW BIO</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<img src="http://ind.ccio.co/I/g5/U9/4ea7744cfd95a0b491203004e516808f.jpg?iw=300" class="profilepic" alt="Profile Pic">
<div class="lilbluebox">
<div class="teambox">
<ul>
<li>
<p class="whitetext">Some Old Man</p>
</li>
<li>
<div class="viewbio">VIEW BIO</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
CSS：
body{
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size:12px;
width:100%;
height:100%;
}
.maincontent{
max-width:1240px;
height:100%;
margin:0 auto;
padding-right:30px;
}
#ourteamslide{
height:auto;
background-color:#eeeeee;
padding-top:80px;
}
.whitetext{
color:#000000;
width:200px;
}
.ourteamlist{
max-width:1200px;
height:1000px;
padding-left:30px;
padding-right:10px;
background-color:#eeeeee;
text-align:center;
margin:0 auto;
margin-left:-1px;
clear:both;
}
.ourteamlist ul li{
display:inline-block;
margin-right:-3px;
text-align:left;
margin-top:1px;
}
.profilepic{
height:205px;
width:299px;
padding-left:0px;
padding-right:1px;
padding-bottom:1px;
}
.lilbluebox{
background-color:#FFFFFF;
margin-top:-5px;
width:299px;
height:80px;
}
.teambox{
padding-left:30px;
padding-top:20px;
width:100%;
}
.teambox ul li{
display:inline-block;
}
.viewbio{
font-size:11px;
font-weight:600;
text-align:right;
margin-right:30px;
color:#888888;
cursor:pointer;
}
.biobox{
display:block;
background-color:#1E2129;
color:#FFFFFF;
padding-left:30px;
padding-top:20px;
padding-right:30px;
max-width:600px;
}
.teambox ul li a{
text-decoration: none;
谢谢您的帮助！
最佳答案
您可以做的就是选择所有链接并将其设置为“查看生物”，然后将单击的链接更改为“隐藏生物”。
$(document).ready(function () {
$(".viewbio").click(function() {
var $self = $(this);
var originalText = $self.text().trim();
$(".viewbio").text("VIEW BIO");
if (originalText == "VIEW BIO") {
$self.text("HIDE BIO");
}
});
});
关于javascript - 使用jQuery交换文本，如何将其他文本还原为原始文本？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25065553/