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:
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.