javascript - 如果元素为 :hidden or :visible，则更改 文本

Question

我有一个按钮可以切换 playlistHolder div。此外，当选择“.albumImage a”时，它也会取消隐藏播放列表。我试图将按钮的文本更改为“显示播放列表”(如果播放列表已隐藏)和“隐藏播放列表”(如果未隐藏)。我尝试过 if(('.playlist').is(:hidden)) 的单击功能，但没有成功使其正常工作。我是 Jquery 新手，所以我知道下面的代码可以进行很大的改进，这是我的设置，现在可以在选择相册图像以及选择切换按钮而不更改文本时使用:

HTML

<div class="togglePlaylist">
    <button id="togglePlaylistBT">Show/Hide Playlist</button>
    <!-- POPUP LAUNCHER -->
</div>
<div class="playlistHolder">
    <div class="componentPlaylist">
        <div class="playlist_inner">
            <!-- playlist items are appended here! -->
        </div>
    </div>
    <!-- preloader -->
    <div class="preloader"></div>
</div>
<div class="albumWrapper">
    <div class="albumCovers">
        <div class="albumImage">    <a href='#componentWrapper' onClick="api_loadPlaylist(hap_players[0],{hidden: false, id: '#playlist3'}); return false;"><img class="img-responsive" src="media/music/Album_Covers/Swag_Brothers.jpg" alt="thumb" /></a>

            <p class="nowPlaying">Now Playing</p>
        </div>
    </div>
</div>

Javascript/JQuery

$('#togglePlaylistBT, .albumImage a').on('click', function() {
                var $this = $('#togglePlaylistBT');
                if($('.playlistHolder').is(':visible')) 
                {
                    $('.playlistHolder').hide('slow');
                    $this.text('Hide Playlist');
                }
                else
                {
                    $('.playlistHolder').show('slow');
                    $this.text('Show Playlist');
                }
            });

Answer 1

试试这段代码:

    $('.togglePlaylist button').on('click', function() {
        var $this = $(this);
        if($('.playlistHolder').is(':visible')) 
        {
            $('.playlistHolder').hide();
            $this.text('Hide Playlist');
        }
        else
        {
            $('.playlistHolder').show();
            $this.text('Show Playlist');
        }
    });

Working JSFiddle