[英]Change text of anchor once it is clicked with jQuery
我在使用以下代码显示/隐藏单击锚点时的div。
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
因此,当点击'show_hide'div时,'slidingDiv'显示。 但是,如果单击“show_hide”div,我怎么能更改它的文本。 例如,我希望'show_hide'读取'Toggle Open',如果点击“Toggle Close”,我怎么能改变它?
谢谢!
使用text()
方法和回调为文本创建切换功能
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
$(this).text(function(_, txt) {
return txt === 'Toggle Open' ? 'Toggle Close' : 'Toggle Open';
});
});
要使用锚点中的文本,您可以将其存储在data()
,就像这样
$('.show_hide').each(function() {
$(this).data('default_text', $(this).text())
}).click(function(){
$(".slidingDiv").slideToggle();
var text = $(this).data('default_text');
$(this).text(function(_, txt) {
return txt === text ? 'Toggle Close' : text;
});
});
您也可以使用数据属性在HTML中定义替代文本
<a href="#" class="show_hide" data-close="Search Close">Search</a>
并做
$('.show_hide').each(function() {
$(this).data('default_text', $(this).text())
}).click(function(){
$(".slidingDiv").slideToggle();
var text = $(this).data('default_text');
$(this).text(function(_, txt) {
return txt === text ? $(this).data('close') : text;
});
});
你可以这样做:
JS:
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
$(this).toggleClass('open');
});
HTML:
<a href="#" class="show_hide">
<span class="textopen">Toggle Open</span>
<span class="textclose">Toggle Close</span>
</a>
CSS:
.textclose {display: none;}
.show_hide.open .textopen {display: none;}
.show_hide.open .textclose {display: inline;}
例如,我个人更喜欢将文本保留在html而不是JS中以用于维护目的。 您的javascript也保持简洁。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.