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

Answer 2

隐藏并显示播放列表时，只需运行document.getElementById("togglePlaylistBT").value="Show Playlist";

即可

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 请务必将openBox()和closeBox()功能更改为您的包装箱代码！

如果元素为：hidden或：visible </button>，请更改<button>文本

2 个答案: