如果元素为 :hidden 或 :visible，则更改 <button> 文本

Question

我有一个按钮可以切换 playlistHolder div。此外，当“.albumImage a”被选中时，它也会取消隐藏播放列表。如果播放列表被隐藏，我试图将按钮的文本更改为 'Show Playlist'，如果播放列表未被隐藏，则更改为 'Hide Playlist'。我已经尝试使用 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

Answer 2

当您隐藏和显示播放列表时运行 document.getElementById("togglePlaylistBT").value="Show Playlist";

例如：

function change() 
{
    var elem = document.getElementById("playlistButton");
    if (elem.value=="Open Playlist") { elem.value = "Close Playlist"; closeBox(); }
    else { elem.value = "Open Playlist"; openBox(); }
}

function openBox() {
    alert("open");
}

function closeBox() {
    alert("closed");
}

<input onclick="change()" type="button" value="Open Playlist" id="playlistButton"></input>

确保将 openBox() 和 closeBox() 功能更改为您的盒子代码！

如果元素为 :hidden 或 :visible，则更改 <button> 文本

Change <button> text if element is :hidden or :visible

html

javascript

jquery

button