<button>如果element為：hidden或：visible則</button>更改<button>文本</button>

Question

我有一個按鈕可以切換playlistHolder div。 另外，當選擇“ .albumImage a”時，它也會取消隱藏播放列表。 我正在嘗試將按鈕的文本更改為“顯示播放列表”（如果播放列表被隱藏），以及“隱藏播放列表”（如果未隱藏）。 我已經嘗試過使用if（（'。playlist'）。is（：hidden））的click函數，但是還沒有運氣。 我是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');
        }
    });

工作中的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()函數更改為您的Box代碼！