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

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时,它应该再次单击时将文本"OPEN"更改为"close",反之亦然.但似乎点击工作只有一次,当我第一次点击它将文本从"打开"更改为"关闭",但当我再次点击 - 没有任何反应...

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

演示:小提琴