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）。（每次获取图标似乎都没有意义 - 毕竟它是相同的图标，所以我只能得到它一次并从同一个'源'显示它。不知道如何实现这一点。 / p>

任何帮助都会有用！

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)
      ....
        }

Answer 2

在@ 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);
            }
        });
    }

使用jQuery Ajax切换从MySQL中提取的信息

2 个答案: