单击后更改元素的文本或HTML

Question

我想span点击更改元素的文字:

$('.int-bank h2 span').text('Open List');
$('.int-bank h2').bind("click", function (e) {
    $(this).next("p").toggleClass("lblock");
    var spn = $(this).find("span");
    spn.text('Close List');
});

但在第二次单击时,span的文本不会更改为"Open List".我怎样才能做到这一点？

Answer 1

太糟糕了没有toggleText();-).你必须自己检查一下这个值:

spn.text(spn.text() == 'Open List' ? 'Close List' : 'Open List');

嘿,虽然我在,但为什么不做一个toggleText():

$.fn.toggleText = function (text1, text2) {
    var curText = this.text();
    this.text(!$.trim(curText) ? text1 : 
        (curText == text1 ? text2 : text1));
    return this;
};

然后像这样简化你的代码:

$('.int-bank h2 span').text('Open List');
$('.int-bank h2').click(function () {
    $(this).next('p').toggleClass('lblock');
    $(this).find('span').toggleText('Open List', 'Close List');
});