Question

好的，基本上我设置了一个javascript代码，可以在点击时更改文本，但是当再次点击时我遇到了问题我希望它再次返回到与更改前相同的状态。我也尝试了返回功能，但我似乎做错了什么！

HTML：

<h5><div id="open">Concept Art -</div></h5>

使用Javascript：

$(document).ready(function(){
    $("#open").click(function(){
        $("#gallery3").toggle();
        $("#open").text("Concept Art +")
    });
});

Answer 1

只需替换：

$("#open").text("Concept Art +")

使用：

var mytext = $("#open").text()=='Concept art +' ? 'Concept art -' : 'Concept art +';
$("#open").text(mytext);

Answer 2

你没有任何改变它的东西。

$("#open").text("Concept Art +")将文字更改为“+”符号，但您没有任何内容可以将其更改为“ - ”

您可以尝试添加一些if逻辑来检查是否存在“ - ”或“+”。

Answer 3

使用数据属性并检查其状态：

HTML

<h5><div id="open" data-state="open">Concept Art -</div></h5>

JS

$(document).ready(function () {
  $("#open").click(function () {

    // cache the selector
    var $this = $(this);

    $("#gallery3").toggle();
    if ($this.data('state') === 'open') {
      $this.text("Concept Art -")
      $this.data('state', 'closed');
    } else {
      $this.text("Concept Art +")
      $this.data('state', 'open');
    }
  });
});

Demo

Answer 4

试试这个

$(document).ready(function() {
    $('#open').toggle(function() {
        $(this).text('Concept Art +');
    }, function() {
        $(this).text('Concept Art -');
    });
});

更改文本功能然后返回

4 个答案: