0

我正在显示播放列表（来自 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) 在第二个播放列表上工作。（也每次都获取图标似乎没有意义 - 毕竟它是同一个图标，所以我可以只得到它一次并从同一个“来源”显示它。但我真的不知道如何实现这一点。

任何帮助都会很有用！

4

2 回答 2

2

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

$("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)
      ....
        }
于 2013-08-19T12:12:26.197 回答
0

在@raam86 的一点提示之后，我设法自己解决了我的问题。我存储了有关当前播放列表状态($this.data('visible')) 的信息以及当前列表中的电影是否已下载的信息($this.data('downloaded'))。感谢帮助！

这是代码：

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

    $this = $(this);

    if($this.data('visible') ){
        $this.data('visible',false);
        $('#films-'+pID).slideUp();
    } else if ($this.data('downloaded') && (!$this.data('visible')))
    {
        $this.data('visible',true);
        $('#films-'+pID).slideDown();
    }
    else 
    {
        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();
                $this.data('visible',true);
                $this.data('downloaded', true);
                $('#films-'+pID).hide().append(response).slideDown();
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(thrownError);
            }
        });
    }
于 2013-08-19T12:53:25.470 回答