Изменить <button> текст если элемент: скрытый или: видимый

Question

У меня есть кнопка, которая переключает плейлистHolder div. Кроме того, когда выбрано «.albumImage a», оно также отображает список воспроизведения. Я пытаюсь изменить текст кнопки «Показать список воспроизведения», если список воспроизведения скрыт и «Скрыть список воспроизведения», если он не скрыт. Я попробовал функции щелчка, если (('. 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() функции в код коробки!