0

クリックすると要素を表示および非表示にする単語のグループがあります。さらに、最初の単語グループを変更する必要があります。したがって、クリックされると、コンテンツを含むコンテナーが表示され、非表示に変更されます。または、もう一度クリックすると、コンテンツが非表示になり、再び「表示」になります。

<div class="hide-show-button">Click Here to <span id="hide-show-changed">Show</span></div>
<div class="hide-show">
.... content
</div>

    <script>
    $('.hide-show').hide();

    $('.hide-show-button').click(function(){
    $('.hide-show').show();
    $('#hide-show-changed').text('Hide');
    }, function() {
    $('.hide-show').hide();
    $('#hide-show-changed').text('Show');
    });
    </script>

ありがとう

4

2 に答える 2

1

非表示と表示を切り替えるカウンターを使用できます。

var click = 0;
$('.hide-show-button').click(function() {
     if(click == 1)
     {
        $(this).text('show');
        $('.hide-show').hide();
        click--;
     }
     else
     {
        $(this).text('hide');
        $('.hide-show').show();
        click++;
     }

});
于 2013-09-28T20:53:05.340 に答える
1

.text()クリックした要素を参照するメソッドのコールバック関数とthisキーワードを使用できます。

<div class="hide-show-button">
       Click Here to <span class="hide-show-changed">Show</span>
</div>
<div class="hide-show">
.... content
</div>


$('.hide-show-button').on('click', function(){
   var fn;
   $('span', this).text(function(_, text) {
       fn = text.toLowerCase();
       return text === 'Show' ? 'Hide' : 'Show';
   }).parent().next()[fn]();
});

http://jsfiddle.net/KzwXQ/

@Joeが示唆するように、メソッドも使用できます.toggle()：

$('.hide-show-button').on('click', function () {
    $('span', this).text(function (_, currentText) {
        return currentText === 'Show' ? 'Hide' : 'Show';
    }).parent().next().toggle();
});
于 2013-09-28T21:04:23.623 に答える