我有以下jQuery代码,用于在页面上找到ul
元素,在li
元素中的第三个项目之后隐藏所有ul
个项目,并附加“显示更多!“文本链接,在点击时显示/切换隐藏的列表项。
$('ul')
.find('li:gt(2)')
.hide()
.end()
.append(
$('<li>Show More!</li>').click( function(){
$(this).siblings().toggle(500);
})
);
脚本功能的一个示例:http://jsfiddle.net/vf6j5/
以下是我希望脚本执行的操作:当点击“显示更多!”后显示隐藏元素时,我希望“显示更多!”< / em>要替换为“Show Less!”的文本。这样做会更加用户友好,并且更有意义。
关于如何实现这一目标的任何想法?
答案 0 :(得分:5)
$('ul')
.find('li:gt(2)')
.hide()
.end()
.append(
$('<li>Show More!</li>').click(function() {
var txt = $(this).text() == "Show More!" ? "Show Less!" : "Show More!";
$(this).text(txt).siblings(':gt(2)').toggle(500);
})
);
答案 1 :(得分:5)
看看这个:
$('ul')
.find('li:gt(2)')
.hide()
.end()
.append(
$('<li class="title">Show More!</li>').click( function(){
$(this).siblings().toggle(500);
$(".title").html() === "Show More!"
? $(".title").html("Show Less!")
: $(".title").html("Show More!")
})
);
答案 2 :(得分:4)
$('ul').find('li:gt(2)').hide().end().append(
$('<li>Show More!</li>').click(function() {
var $this = $(this);
$this.siblings().toggle(500);
$this.text(function(i, t) {
return t === 'Show More!' ? 'Show Less!' : 'Show More!'
})
}));
答案 3 :(得分:3)
$('ul').find('li:gt(2)')
.hide()
.end()
.append(
$('<li>Show More!</li>').click(function() {
$(this).text($(this).prev('li').is(':visible') ? 'Show More' : 'Show Less')
.siblings().toggle(500);
})
);
答案 4 :(得分:0)
非常简单 - 选择要更改的元素并修改其文本
$('#myButton').text('Show Less!');
答案 5 :(得分:0)
由于您在点击活动中已经有this
,因此只需在其上调用.text()
:
.... .click(function() {
var that = $(this);
that.siblings().toggle(500);
that.text("Show less!");
});