jquery - 在 div 内来回更改文本

Question

我对 div 和 span 标签内的文本区域有一个小问题。它的作用是成为打开下拉 div 的 href，当再次单击文本时，它会关闭该 div。

<a href="#" id="toggle4">
    <span class="halfCircleBottom">OPEN</span>
</a>

所以我想要实现的是，当我点击 OPEN 时，它应该变为 CLOSE，而当我再次点击 CLOSE 时，它应该变为 OPEN。到目前为止，我发现的所有内容都是更改文本一次，但不会再次恢复到原始值。

Answer 1

$('span.halfCircleBottom').click(function(){
    this.innerHTML = this.innerHTML === "OPEN" ? "CLOSE" : "OPEN";
});

现场演示

Answer 2

$(document).ready( function(){
    $("#cf_onclick").toggle(
        function(){$(this).html("<h2>A</h2>");},
        function(){$(this).html("<h2>B</h2>");}
    ).click();
});

另一种方法

$('#toggle_template').html(function(i, html) {
        if (html.indexOf(' (click to view)') > 1) {
            return html.replace(' (click to view)', ' (click to close)')
        }
        return html.replace(' (click to close)', ' (click to view)')
    }); 

JSFIDDLE 演示

第二种方法JSFIDDLE DEMO

Answer 3

使用 JQuery 很容易 :)

<a href="javascript:void(0);" onclick="btnclick()"><span class="halfCircleBottom">OPEN</span></a>

JS：

function btnclick() {
 $('#divID').slideToggle();
  if ($('.halfCircleBottom').text() == "CLOSE"){
  $('.halfCircleBottom').text("OPEN")
  } else {
  $('.halfCircleBottom').text("CLOSE")
  }
}

单击时，它会将文本更改为 OPEN 或 close 并上下滑动 div。这真的很容易理解:)