jquery - 切换功能问题

Question

我有 DIV 内容和 HIDE/SHOW 超链接。该功能没有按预期发生。最初，div 内容通过隐藏链接可见，一旦用户单击 HIDE 链接，DIV 内容就会关闭并且链接值变为 SHOW。一旦用户点击返回，它应该显示 DIV 内容并将 SHOW 链接更改为 HIDE

<div id="collapse1">
        content
</div>

<a href="#collapse1" class="nav-toggle">Hide</a>


$('.nav-toggle').click(function()
          {
            var txtValue = $('.nav-toggle').text();
            $('#collapse1').toggle('fast');
            if(txtValue = 'Hide'){$('.nav-toggle').html('Show');}
            else if(txtValue = 'show'){
            $('.nav-toggle').text('hide');}

          });

演示代码：http: //jsfiddle.net/dkdRt/5/

Answer 1

=是赋值运算符。

==并且===是比较运算符。

演示

==和之间的区别===

$('.nav-toggle').click(function () {
    var txtValue = $('.nav-toggle').text();
    $('#collapse1').toggle('fast');
    if (txtValue === 'Hide') {
        $('.nav-toggle').html('Show');
    } else if (txtValue === 'Show') { // not 'show', values are case sensitive
        $('.nav-toggle').text('Hide');
    }
});

Answer 2

更改此行

else if (txtValue = 'show') 

至

else if (txtValue = 'Show') // Case sensitive

Answer 3

问题是条件（区分大小写和等号），但更简单的解决方案是使用text()回调函数：

$('.nav-toggle').on('click', function(e) {
    e.preventDefault();
    $('#collapse1').toggle('fast');
    $('.nav-toggle').text(function(_,txt) {
        return txt == 'Hide' ? 'Show' : 'Hide';
    });
});

小提琴

Answer 4

演示

如果你注意下面的代码，基本上有两个问题

1. 比较时，大小写不匹配。

if (txtValue = 'Show') // originally was show and it should be Show

2. 缺少条件运算符，而是使用了赋值运算符。

if (txtValue = 'Hide') { $('.nav-toggle').html('Show'); }

应该像下面这样..

if (txtValue === 'Hide') { $('.nav-toggle').html('Show'); }

jQuery

$('.nav-toggle').click(function (e) {
    e.preventDefault();
    var txtValue = $('.nav-toggle').text();
    $('#collapse1').toggle('fast');
    if (txtValue === 'Hide') { $('.nav-toggle').html('Show'); }
    else if (txtValue === 'Show') {
        $('.nav-toggle').text('Hide');
    }
});