Tengo una página web que usa javascript y ajaxpage para cargar una página dentro de otra página sin tener que actualizar. El código se ve así:
<a href="javascript:ajaxpage('r/gd.php','releases');">LINK</a>Al hacer clic en ENLACE, se cargará 'r/gd.php' en el DIV que he etiquetado como 'lanzamientos'. Obtuve la columna vertebral del código para lograr esto desde este sitio web aquí:
Todo esto funciona muy bien hasta que intento usar casillas de verificación para filtrar el contenido de un DIV en una página cargada. Lo que me gustaría hacer es tener una serie de casillas de verificación con identificaciones únicas como esta:
<input type="checkbox" id="all"> Show All <input type="checkbox" id="red"> Red <input type="checkbox" id="orange"> Orange <input type="checkbox" id="yellow"> YellowEstos mostrarían/ocultarían varios DIV cuando estén marcados/desmarcados que contengan una serie de clases como esta:
<div id="box" class="all red"><?php echo $gdclock; ?></div> <div id="box" class="all red orange"><?php echo $gdheart; ?></div> <div id="box" class="all orange"><?php echo $gdblue; ?></div> <div id="box" class="all red orange yellow"><?php echo $gdwhite; ?></div> <div id="box" class="all yellow"><?php echo $gdclearsplat; ?></div> <div id="box" class="all red yellow"><?php echo $gdredblack; ?></div>No estoy seguro de cómo lograr esto en una página que está cargada de la forma en que lo estoy haciendo. He usado ejemplos como este y este que funcionan muy bien cuando solo visito una URL, pero tan pronto como voy a usar el mismo código en una página cargada dinámicamente, no hace nada.
¿Hay algo que me estoy perdiendo aquí? Este es un enlace a mi página web (se ve mejor en el escritorio). Si hace clic en TODOS LOS ÁLBUMES en la barra lateral izquierda, se cargará una página llena de discos de vinilo con casillas de verificación en la parte superior. Me gustaría filtrar según el color (usando clases/ID como se describe arriba) y ocultar todo lo demás. Lo ideal es tener más de una casilla de verificación activa a la vez.
Su pregunta original no parece mostrar un vínculo entre la llamada Ajax y la activación/desactivación selectiva de elementos Html. ¿Es esto lo que estás buscando?
$(document).ready(() => { $("#all div").hide(); $("p#checkboxes > :checkbox").change(() => { $("#all div").hide(); if ($("#all").is(":checked")) $("#all div").show(); else { if ($("#red").is(":checked")) $(".red").show(); if ($("#orange").is(":checked")) $(".orange").show(); if ($("#yellow").is(":checked")) $(".yellow").show(); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <p id="checkboxes"> <input type="checkbox" id="all"> Show All <input type="checkbox" id="red"> Red <input type="checkbox" id="orange"> Orange <input type="checkbox" id="yellow"> Yellow </p> <div id="all"> <div class="red">Only red stuff</div> <div class="red orange">red & orange stuff</div> <div class="orange">Only orange stuff</div> <div class="red orange yellow">anything</div> <div class="yellow">Only yellow things</div> <div class="red yellow">Red & yellow</div> </div>Si lo anterior no es lo que necesita, proporcione más detalles en su pregunta.