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

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

2 个答案: