Question

我有以下代码：

<td class="select-cli-numbers"><div class="explanationText" style="cursor:pointer;">Click here to select numbers</div></td>

当切换时，我想显示为单击此处隐藏CLI编号

我的js如下，但不起作用。任何想法？

$(".select-cli-numbers").toggle(function () {
            $('#cli-numbers').show();
            $(this).text() = "Click here to hide CLI numbers"
    }, function () {
            $('#cli-numbers').hide();
            $(this).text() = "Click here to show CLI numbers"
        });

Answer 1

你的语法只是一个小问题。

$(".select-cli-numbers").toggle(function () {
  $('#cli-numbers').show();
  $(this).children().text("Click here to hide CLI numbers");
}, function () {
  $('#cli-numbers').hide();
  $(this).children().text("Click here to show CLI numbers");
});

text()接受一个文本字符串，并将元素的文本节点设置为该文本。

Answer 2

应该是这样的

$(document).ready(function() {
    $(".explanationText").toggle(function () {
      $('#cli-numbers').show();
      $(this).text("Click here to hide CLI numbers");
    }, function () {
      $('#cli-numbers').hide();
      $(this).text("Click here to show CLI numbers");
    });


});

Answer 3

由于您使用的toggle()功能是deprecated，我会选择点击功能：

$(".select-cli-numbers").on('click', function() {
    var msg = $('#cli-numbers').toggle().is(':visible')?'hide':'show';
    $('.explanationText', this).text("Click here to "+msg+" CLI numbers");
});

FIDDLE

单击jquery更改文本

3 个答案: