2

Mediante mi código PHP

    //Busca todas las categorías en referencia de un producto por ejemplo: Capitulo 1, Capitulo 2, Capitulo 3
    $stmtChapters = $con->prepare("SELECT id_chapters,chapters FROM chapters WHERE id_video=?");
    $stmtChapters->bind_param("i",$id_video);
    $stmtChapters->execute();
    $stmtChapters->store_result();

    if ($stmtChapters->num_rows>0) {
        $stmtChapters->bind_result($id_chapters, $chapters);
        while ($stmtChapters->fetch()) {
            echo '<h1 class="chapters-player">'.$chapters.'</h1>';

            //Obtenemos todo los contenidos en base a la categoria por ejemplo se muestran 10 vídeos o textos en el Capitulo 1 y así sucesivamente en los otros capítulos.
            $stmtVideos = $con->prepare("SELECT title_video,format,multimedia,detail,url_website FROM videos WHERE id_video=? AND id_chapters=? AND active=?");
            $stmtVideos->bind_param("iii",$id_video,$id_chapters,$active);
            $stmtVideos->execute();
            $stmtVideos->store_result();

            if ($stmtVideos->num_rows>0) {
                $stmtVideos->bind_result($title_video, $format,$multimedia,$detail,$url_website);
                $i = 1;
                $mNav='<div id="enlaces" class="videolist">';
                $mDivs='<div id="ocultado" style="display: none;">';
                while ($stmtVideos->fetch()) {

                    if($format === 'video') {
                        $mNav.='<a class="link" href="'.$multimedia.'">
                                    <div class="panel-video">
                                        <span class="play-title">'.$title_video.'</span>
                                    </div>
                                </a>';
                    }
                    if($format === 'html') {
                        $mNav.='<a class="link" href="'.$url_website.'">
                                    <div class="panel-video">
                                        <span class="play-title">'.$title_video.'</span>
                                    </div>
                                </a>';
                    }

                    if($format === 'text') {
                        $mNav.='<a class="link" id="link_'.$i.'" href="#">
                                    <div class="panel-video">
                                        <span class="play-title">'.$title_video.'</span>
                                    </div>
                                </a>';
                        $mDivs.='<div class="cuadro frame-scroll-multi-content" id="c_link_'.$i.'">'.$detail.'</div>';
                    }

                $i++;
                }
                $mDivs.='</div>';
                $mNav.='</div>';

                echo $mNav;
                echo $mDivs;

            } else {
                //
            }
        }
    } else {
        //
    }

Obtengo las categorías de los capítulos y en consiguiente también los productos o los datos enlazados al capitulo obteniendo lo siguiente:

introducir la descripción de la imagen aquí

El problema exacto que presento es el siguiente justo en esta parte del código PHP

                    if($format === 'text') {
                        $mNav.='<a class="link" id="link_'.$i.'" href="#">
                                    <div class="panel-video">
                                        <span class="play-title">'.$title_video.'</span>
                                    </div>
                                </a>';
                        $mDivs.='<div class="cuadro frame-scroll-multi-content" id="c_link_'.$i.'">'.$detail.'</div>';
                    }
                    $i++;

Debido a que aquella parte de código me imprime lo siguiente:

<div class="list-scroll-video">
    <h1 class="chapters-player">Capitulo 1</h1>
    <div id="enlaces" class="videolist">
        <a class="link" id="link_1" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 1</span>
            </div>
        </a>
        <a class="link" id="link_2" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 2</span>
            </div>
        </a>
        <a class="link" id="link_3" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 3</span>
            </div>
        </a>
        <a class="link" id="link_4" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 4</span>
            </div>
        </a>
    </div>

    <div id="ocultado" style="display: none;">
        <div class="cuadro frame-scroll-multi-content" id="c_link_1">   DATOS DE TEXTO 1    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_2">   DATOS DE TEXTO 2    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_3">   DATOS DE TEXTO 3    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_4">   DATOS DE TEXTO 4    </div>
    </div>

    <h1 class="chapters-player">Capitulo 2</h1>
    <div id="enlaces" class="videolist">
        <a class="link" id="link_1" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 5</span>
            </div>
        </a>
        <a class="link" id="link_2" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 6</span>
            </div>
        </a>
        <a class="link" id="link_3" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 7</span>
            </div>
        </a>
        <a class="link" id="link_4" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 8</span>
            </div>
        </a>
    </div>

    <div id="ocultado" style="display: none;">
        <div class="cuadro frame-scroll-multi-content" id="c_link_1">   DATOS DE TEXTO 5    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_2">   DATOS DE TEXTO 6    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_3">   DATOS DE TEXTO 7    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_4">   DATOS DE TEXTO 8    </div>
    </div>

</div>

Si ustedes observan en el Capitulo 2, se vuelve a repetir los id tanto en <a class="link" id="link_1" href="#"> (id="link_1") como en div class="cuadro frame-scroll-multi-content" id="c_link_1"> DATOS DE TEXTO 1 </div> (id="c_link_1")

Al repetirse los números me causa un problema con el código jQuery, entonces para que sea más claro el resultado que debo y que debería obtener es el siguiente:

<div class="list-scroll-video">
    <h1 class="chapters-player">Capitulo 1</h1>
    <div id="enlaces" class="videolist">
        <a class="link" id="link_1" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 1</span>
            </div>
        </a>
        <a class="link" id="link_2" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 2</span>
            </div>
        </a>
        <a class="link" id="link_3" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 3</span>
            </div>
        </a>
        <a class="link" id="link_4" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 4</span>
            </div>
        </a>
    </div>

    <div id="ocultado" style="display: none;">
        <div class="cuadro frame-scroll-multi-content" id="c_link_1">   DATOS DE TEXTO 1    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_2">   DATOS DE TEXTO 2    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_3">   DATOS DE TEXTO 3    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_4">   DATOS DE TEXTO 4    </div>
    </div>

    <h1 class="chapters-player">Capitulo 2</h1>
    <div id="enlaces" class="videolist">
        <a class="link" id="link_5" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 5</span>
            </div>
        </a>
        <a class="link" id="link_6" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 6</span>
            </div>
        </a>
        <a class="link" id="link_7" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 7</span>
            </div>
        </a>
        <a class="link" id="link_8" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 8</span>
            </div>
        </a>
    </div>

    <div id="ocultado" style="display: none;">
        <div class="cuadro frame-scroll-multi-content" id="c_link_5">   DATOS DE TEXTO 5    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_6">   DATOS DE TEXTO 6    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_7">   DATOS DE TEXTO 7    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_8">   DATOS DE TEXTO 8    </div>
    </div>

</div>

Me pueden indicar que cambios debo realizar para obtener ese resultado.

1 respuesta 1

0

El problema es que tienes dos loops anidados y en cada iteracion del primer loop inicializas la variable $i = 1;. La solucion es sacar esa variable fuera del primer loop asi:

if ($stmtChapters->num_rows>0) {
        $stmtChapters->bind_result($id_chapters, $chapters);
        $i = 1;
        while ($stmtChapters->fetch()) {
            echo '<h1 class="chapters-player">'.$chapters.'</h1>';

            //Obtenemos todo los contenidos en base a la categoria por ejemplo se muestran 10 vídeos o textos en el Capitulo 1 y así sucesivamente en los otros capítulos.
            $stmtVideos = $con->prepare("SELECT title_video,format,multimedia,detail,url_website FROM videos WHERE id_video=? AND id_chapters=? AND active=?");
            $stmtVideos->bind_param("iii",$id_video,$id_chapters,$active);
            $stmtVideos->execute();
            $stmtVideos->store_result();

            if ($stmtVideos->num_rows>0) {
                $stmtVideos->bind_result($title_video, $format,$multimedia,$detail,$url_website);                    
                $mNav='<div id="enlaces" class="videolist">';
                $mDivs='<div id="ocultado" style="display: none;">';
                while ($stmtVideos->fetch()) {

                    if($format === 'video') {
                        $mNav.='<a class="link" href="'.$multimedia.'">
                                    <div class="panel-video">
                                        <span class="play-title">'.$title_video.'</span>
                                    </div>
                                </a>';
                    }
                    if($format === 'html') {
                        $mNav.='<a class="link" href="'.$url_website.'">
                                    <div class="panel-video">
                                        <span class="play-title">'.$title_video.'</span>
                                    </div>
                                </a>';
                    }

                    if($format === 'text') {
                        $mNav.='<a class="link" id="link_'.$i.'" href="#">
                                    <div class="panel-video">
                                        <span class="play-title">'.$title_video.'</span>
                                    </div>
                                </a>';
                        $mDivs.='<div class="cuadro frame-scroll-multi-content" id="c_link_'.$i.'">'.$detail.'</div>';
                    }

                $i++;
                }
                $mDivs.='</div>';
                $mNav.='</div>';

                echo $mNav;
                echo $mDivs;

            } else {
                //
            }
        }
    } else {
        //
    }
5
  • Hola @alanfcm gracias por responder en estos momentos pruebo lo sugerido :)
    – Lou
    Commented el 16 ago. 2019 a las 20:54
  • Perfecto funciona perfectamente, no se como se puedo pasar por alto aquello, amigo una duda es posible poder agregar al final los contenedores de id="cuadro" así jsfiddle.net//6crpz7Lt tengo que mover aquello $mDivs.='<div class="cuadro frame-scroll-multi-content" id="c_link_'.$i.'">'.$detail.'</div>'; pero esto creo que ocasionara otro gran problema si tiene alguna sugerencia se lo agradecería muchas gracias
    – Lou
    Commented el 16 ago. 2019 a las 21:02
  • Te refieres a los divs con class="cuadro"? Que es lo que quieres mover o agregar?
    – alanfcm
    Commented el 16 ago. 2019 a las 21:06
  • Si exactamente aquello que van dentro de un contenedor <div id="ocultado" style="display: none;"></div> me gustaría poder tenerlos al final así jsfiddle.net//6crpz7Lt y no que se añadan debajo de cada capitulo es decir así no: jsfiddle.net/jtrmeqnv no se si tienes un tiempito en revisar la estructura HTML
    – Lou
    Commented el 16 ago. 2019 a las 21:11
  • Solo tienes que sacar el echo $mDivs; fuera de los 2 loops.
    – alanfcm
    Commented el 16 ago. 2019 a las 21:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.