jquery - jQuery：隐藏/显示+更改文本单击同一类

Question

我有一组词，点击时应该显示和隐藏元素。此外，我需要更改第一组单词。因此，如果它被点击，它会显示带有内容的容器 + 被更改为隐藏。或者，当再次单击它时，它应该隐藏内容并再次变为“显示”。

<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>

谢谢

Answer 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++;
     }

});

Answer 2

您可以使用.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();
});