切换功能问题

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

更改此行

else if (txtValue = 'show') 

到

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

Answer 2

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

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

FIDDLE

Answer 3

<强> DEMO

如果您注意以下代码，基本上有两个问题

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

Answer 4

=是赋值运算符。

==和===是比较运算符。

DEMO

Difference between == and ===

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