从 MySQL 数据库获取数据到手风琴答案

【问题标题】：Fetching data from MySQL database to accordion从 MySQL 数据库获取数据到手风琴
【发布时间】：2018-10-02 08:22:39
【问题描述】：

从 MySQL 数据库获取数据到 html 手风琴

我正在从数据库中获取剧集并希望将其放入 Accordion.. 所以我尝试并成功获取数据，但在放入手风琴时遇到了问题。

获取后...所有剧集都在“第 1 季”中加载...而不是相应的季节...

fetch.php

<?php
$connect = mysqli_connect("localhost", "root", "", "baba");
$output = '';

$query = "
SELECT * FROM `episodes` WHERE `title_id` = '9851'
";

$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
 $output .= '

 ';

while($row = mysqli_fetch_array($result))
{
   $output .= '
  <!-- video episode item -->
  <div class="related-video-item">
      <div class="thumb">

          <a href="#"><img src="'.$row["poster"].'" alt=""></a>
      </div>
      <a href="#" class="title">'.$row["title"].'</a>
      <a class="channel-name" href="#">Episode '.$row["episode_number"].'<span>
              <i class="fa fa-check-circle"></i></span></a>
  </div>
  <!-- // video episode item -->
  ';

 }
 echo $output;
}
else
{
 echo 'Not Found';
}
?>

index.html

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>


    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#S1">Season 1</a>
                </h4>
            </div>
            <div id="S1" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div id="result">
                        <div class="row"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#S2">Season 2</a>
            </h4>
        </div>
        <div id="S2" class="panel-collapse collapse">
            <div class="panel-body">
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#S3">Season 3</a>
            </h4>
        </div>
        <div id="S3" class="panel-collapse collapse">
            <div class="panel-body">

            </div>
        </div>
    </div>
    </div>
    </div>
    <script>

        $(document).ready(function () {

            load_data();

            function load_data(epi) {
                $.ajax({
                    url: "fetch.php",
                    method: "POST",
                    data: { query: epi },
                    success: function (data) {
                        $('#result').html(data);
                    }
                });
            }
        });

    </script>
</body>

</html>

【问题讨论】：

$('#result') 是第一个手风琴，所以它在第一个添加所有
更好的方法是返回 sql 结果，并在 jquery 中执行此操作
我知道 $('#result') 是第一个手风琴......我试图把所有的手风琴都放进去，但同样发生了......这就是为什么我只提供演示

标签： javascript php html accordion

【解决方案1】：

直接返回sql结果，使用json_encode() 将 ID 添加到手风琴主体，

这就是您可以将数据加载到特定手风琴的方式。

您需要将 value.season_id 手风琴更改为您的数据

<div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#S1">Season 1</a>
                </h4>
            </div>
            <div id="S1" class="panel-collapse collapse in">
                <div class="panel-body" id="div_season_1">
                </div>
            </div>

        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#S2">Season 2</a>
            </h4>
        </div>
        <div id="S2" class="panel-collapse collapse">
            <div class="panel-body" id="div_season_2">
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#S3">Season 3</a>
            </h4>
        </div>
        <div id="S3" class="panel-collapse collapse">
            <div class="panel-body" id="div_season_3">

            </div>
        </div>
    </div>

用ajax做，

$.ajax({
    url: "fetch.php",
    method: "POST",
    data: {query: epi},
    success: function (data) {
        $.each($.parseJSON(data), function (key, value) {
            var output = '';
            output = '<div class="related-video-item"> <div class="thumb">' +
                    '<a href="#"><img src="' + value.poster + '" alt=""></a>' +
                    '</div>' +
                    '<a href="#" class="title">' + value.title + '</a>' +
                    '<a class="channel-name" href="#">Episode ' + value.episode_number + '<span>' +
                    '<i class="fa fa-check-circle"></i></span></a>' +
                    '</div>';
            $('#div_season' + value.season_id).append(output);
        })

    }
});

这样你可以动态添加到特定的手风琴体

但我也愿意让手风琴充满活力，因为你怎么知道你有多少个季节？，

【讨论】：

它起作用了，你是对的，让手风琴充满活力......但是如何做到这一点？
有 2 3 种方法，你可以得到季节的数量，然后在循环中创建手风琴，然后 load_data