如何正确生成章节设计结构及其视频系列？

Question

下面的方法完美运行，它正确生成了下面的HTML结构，你可以在下面的link中看到：https://jsfiddle.net/L6wo42ar/

$id_course = 1;

$stmt = $con->prepare("SELECT id_chapter, chapter
                        FROM tbl_chapters
                        WHERE id_course=?
                        ");
$stmt->bind_param("i", $id_course);
$stmt->execute();
$stmt->store_result();
if ($stmt->num_rows>0) {

    $stmt->bind_result($id_chapter, $chapter);

    while ($stmt->fetch()) {

        $stmtA = $con->prepare("SELECT preview,
                            title_video,
                            description_video,
                            type_format,
                            multimedia,
                            detail,
                            time_video,
                            url_website
                        FROM tbl_videos
                        WHERE id_course=? AND id_chapter=?
                        ");
        $stmtA->bind_param("ii", $id_course, $id_chapter);
        $stmtA->execute();
        $stmtA->store_result();
        if ($stmtA->num_rows>0) {

            $stmtA->bind_result($preview, $title_video, $description_video, $type_format, $multimedia, $detail, $time_video, $url_website);


        $Div = '<div class="modules">
            <button class="accordion">'.$chapter.'</button>';
        $Nav = '<div id="enlaces" class="section videolist" style="display: none;">';
            while ($stmtA->fetch()) {

                //if($type_format === 'video') {
                    $Nav.='<a class="link playing" href="#">
                        <div class="chapter flex">
                            <div><span class="check-mark"></span></div>
                            <div><span class="play-title-course">'.$title_video.'</span></div>
                            <div><span class="time-video">'.$time_video.'</span></div>
                        </div>
                    </a>';
                //}

            }
        }

        $Nav .= '</div></div>';
        echo $Div;
        echo $Nav;
    }
}

因此，由于我需要生成相同的结构，而我建议的代码可以毫无问题地生成相同的结构，因此您可以在此处看到结果：https://jsfiddle.net/L6wo42ar/

现在的问题是我避免在一个周期内进行查询，为此我将两个 tables 结合起来，结果如下：

$id_course = 1;

$stmt = $con->prepare("SELECT c.chapter,
                            v.preview,
                            v.title_video,
                            v.description_video,
                            v.type_format,
                            v.multimedia,
                            v.detail,
                            v.time_video,
                            v.url_website
                        FROM tbl_chapters c
                        JOIN tbl_videos v ON v.id_course = c.id_course AND v.id_chapter = c.id_chapter
                        WHERE c.id_course=?
                        ");
$stmt->bind_param("i", $id_course);
$stmt->execute();
$stmt->store_result();
if ($stmt->num_rows>0) {

    $stmt->bind_result($chapter, $preview, $title_video, $description_video, $type_format, $multimedia, $detail, $time_video, $url_website);

    $tempChapter = "";
    $i = 1;

    while ($stmt->fetch()) {

        if ($tempChapter != $chapter) {

            $Div = '<div class="modules">
            <button class="accordion">'.$chapter.'</button>';
            $Nav = '<div id="enlaces" class="section videolist" style="display: none;">';

            echo $Div;

            $tempChapter = $chapter;
        }

        //if($type_format === 'video') {
            $Nav.='<a class="link playing" href="#">
                    <div class="chapter flex">
                        <div><span class="check-mark"></span></div>
                        <div><span class="play-title-course">'.$title_video.'</span></div>
                        <div><span class="time-video">'.$time_video.'</span></div>
                    </div>
                </a>';
        //}
        
        $Nav .= '</div></div>';

        echo $Nav;
    }

} else {
    echo "no data!";
}

我知道我会遇到问题，尤其是由于视频中记录的数量而将要重复的章节标题的主题table，最后我解决了它如下：

if ($tempChapter != $chapter) {
    echo $chapter;
    $tempChapter = $chapter; 
}

但是，这里的问题是 HTML 结构生成错误，这里的结果是：https://jsfiddle.net/3Lfgbpkc/

你能解释一下如何解决这个错误吗？

Answer 1

为了避免混淆，只需像这样创建一系列章节及其视频

$chapters = array();

  while ($stmt->fetch()) {
    $chapters[$chapter][] = array(
                            "title" => $title_video,
                          "time" => $time_video
                          );

  }

你的$chapters数组会是这样的，

然后使用这个函数打印html内容

printChapters($chapters);

function printChapters($chapters) {
    foreach ($chapters as $chapter => $videos) {
       echo '<div class="modules">
            <button class="accordion">'.$chapter.'</button>
            <div id="enlaces" class="section videolist" style="display: none;">';
           
            foreach ($videos as $key => $video) {
               echo '<a class="link playing" href="#">
                      <div class="chapter flex">
                        <div><span class="check-mark"></span></div>
                        <div><span class="play-title-course">'.$video["title"].'</span></div>
                        <div><span class="time-video">'.$video["time"].'</span></div>
                      </div>
                    </a>';
            }
                    
                        
         echo   '</div>                
          </div>';
    }

}

如何正确生成章节设计结构及其视频系列？

How to correctly generate the chapter design structure and its video series?

php

mysql

mysqli