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');
});

Answer 2

那是因为你从未在点击中将其设置为“打开列表”。

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

除此之外：如果您正在努力简洁，可以使用click处理程序：

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

Answer 3

$('.int-bank h2').click(function(e) {
  $(this).next("p").toggleClass("lblock");

  var spn = $("span", this);
  if (spn.text() == 'Open List') {
    spn.text('Open List'); 
  } else {
    spn.text('Close List');
  }
});

Answer 4

稍微可读的选项：

$('.int-bank h2').toggle(function () {
      $(this).find("span").text('Close List');
}, function () {
      $(this).find("span").text('Open List');
});

Answer 5

我不会改变文字。因为您已经在更改容器的CSS类...

相反，我会制作2个元素，每个文本（或任何你喜欢的HTML），并给每个元素一个CSS 类。

更改CSS，以便一次只能看到其中一个，具体取决于父级的CSS类。

例如使用“lblock-on”和“lblock-off”类：

<style type="text/css">
  .lblock-on { display: none }
  .lblock .lblock-off { display: none }
  .lblock .lblock-on { display: block }
</style>

如果.lblock-on元素是块元素;否则将“display: block”更改为“display: inline”。（“display: inherit”适用于Firefox，但不适用于MSIE。）

Answer 6

<script>
$(document).ready(function(){
    var text=$('.int-bank h2 span').text();
    $(this).next("p").toggleClass("lblock");
    if(text=="Open List")
        $('.int-bank h2 span').text('Close List');
    else
        $('.int-bank h2 span').text('Open List');
})

这是一种方式.........

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

6 个答案: