jquery - 如何使用点击功能作为切换

Question

我正在使用 jQuery 1.3.2（由于 drupal6 无法更新）

jQuery

$(document).ready(function() {
  var textcontent = $('.trig').text();

  $('.trig').click(function() {
    if (textcontent == 'Open') {
      $(this).text('Close').addClass('not-trig');
    } else if (textcontent == 'Close') {
      $(this).text('Open');
    }
  })
});

HTML

<div class="trig">Open</div>

我正在尝试做的事情：

当您单击带有类 .trig 的 div 时，它应该将文本“打开”更改为“关闭”，反之亦然，当您再次单击时。但似乎点击只能工作一次，当我第一次点击时，它会将文本从“打开”更改为“关闭”，但是当我再次点击时 - 没有任何反应......

Answer 1

var textcontent = $('.trig').text();您需要在每次点击中重新获取 的值

$(document).ready(function() {
    $('.trig').click(function() {
        var textcontent = $('.trig').text();
        if (textcontent == 'Open') {
            $(this).text('Close').addClass('not-trig');
        } else if (textcontent == 'Close') {
            $(this).text('Open');
        }
    })
});

演示：小提琴

另一个干净的实现可能是查找类not-trig，因为看起来只有当它存在时才需要该类close。即如果文本是Open那么not-trig可能必须被删除

$(document).ready(function() {
    $('.trig').click(function() {
        var $this = $(this);

        if($this.hasClass('not-trig')){
            $this.text('Open').removeClass('not-trig');
        } else {
            $this.text('Close').addClass('not-trig');
        }
    })
});

演示：小提琴