2

DIV コンテンツと非表示/表示ハイパー リンクがあります。機能が期待どおりに機能していません。最初は div コンテンツが非表示リンクで表示されます。ユーザーが非表示リンクをクリックすると、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/

4

4 に答える 4

0

デモ

以下のコードに注目すると、基本的に 2 つの問題がありました

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');
    }
});
于 2013-06-16T18:59:42.610 に答える
0

=代入演算子です。

==および===は比較演算子です。

デモ

==との違い===

$('.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');
    }
});
于 2013-06-16T20:23:20.197 に答える
0

この行を変更

else if (txtValue = 'show')

に

else if (txtValue = 'Show') // Case sensitive
于 2013-06-16T18:54:30.707 に答える
0

問題は条件 (大文字と小文字の区別と等号) ですが、より簡単な解決策はtext()、コールバック関数を使用することです。

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

フィドル

于 2013-06-16T18:54:37.387 に答える