正在从 MySQL 数据库中获取数据到 accordion

Question

正在从 MySQL 数据库中获取数据到 html accordion

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

获取后...所有剧集都在 "Season 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>

Answer 1

return sql结果直接用json_encode() 将 ID 添加到 accordian body，

这就是将数据加载到特定手风琴的方法。

您需要将 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);
        })

    }
});

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

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

正在从 MySQL 数据库中获取数据到 accordion

Fetching data from MySQL database to accordion

html

javascript

php

accordion