javascript - 使用 jQuery Ajax 从 MySQL 中切换信息

Question

我正在显示播放列表(来自 MySQL 数据库)。播放列表包含电影。我想在单击播放列表时显示播放列表中的所有电影。当再次单击播放列表时，我希望电影能够折叠起来。

此外，我希望在从数据库下载数据时显示加载图标。

这是用于显示播放列表/电影的 HTML/PHP:

$i = 1;
while($pList = mysqli_fetch_array($playlists))
{   
    echo "<div class=\"plist\" id=\"plist-".$pList["id"]."\">
         Playlist ".$i.": ".$pList["title"]."</div>";
    echo "<div id=\"loaderDiv-".$pList["id"]."\"></div>";
    echo "<div id=\"films-".$pList["id"]."\"></div>";
    $i++;
}

这是我当前正在使用的脚本:

$("body").on("click", ".plist", function(e) {
    e.preventDefault();
    var clickedID = this.id.split("-"); 
    var pID = clickedID[1]; 
    //alert("Playlist clicked: " + pID);
    var myData = 'plistToView='+ pID; 

    jQuery.ajax({
        type: "POST", 
        url: "response.php", 
        dataType:"text", 
        data:myData, 
        beforeSend: function(){
            $.get("preloader_JS.html", function (data) {
                $("#loaderDiv-"+pID).append(data);
            });
        },
        success:function(response){
            $("#loaderDiv-"+pID).hide()
            $('#films-'+pID).hide().append(response).slideDown();
        },
        error:function (xhr, ajaxOptions, thrownError){
            alert(thrownError);
        }
    });
});

电影显示正确，但我不知道如何在再次单击播放列表时将它们隐藏起来。

此外，在显示第一个播放列表的信息后，我无法让加载图标 (preloader_JS.html) 在第二个播放列表上工作。 (而且每次都获取图标似乎没有意义 - 毕竟它是相同的图标，所以我只能获取它一次并从相同的“源”显示它。不过，我真的不知道如何实现这一点。

任何帮助都会有用!

Answer 1

你必须以某种方式保存状态。您可以执行以下操作:

$("body").on("click", ".plist", function(e) {
 $this = $(this);
if( $this.data('visible') ){
    $this.data('visible',false)
    $this.hide();

success:function(response){
  $("#loaderDiv-"+pID).data('visible',true)
      ....
        }