dataset_jquery2.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Dataset jquery 2</title>
  5. .resaltado { background-color:yellow; }
  6. </style>
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  8.  
  9. function resaltar(atributo) {
  10. $('#pelis li').show().not(`[data-${atributo}="S"]`).hide();
  11. }
  12.  
  13. function generizar(genero) {
  14. $('#pelis li').show().not(`li[data-gen~="${genero}"]`).hide();
  15. }
  16.  
  17. </script>
  18. </head>
  19. <h1>Dataset jquery 2</h1>
  20. <ul id="pelis">
  21. <li data-anim="S" data-gen="familiar muerte">Coco</li>
  22. <li data-anim="S" data-gen="cuento ogro">Shrek</li>
  23. <li data-bn="S" data-gen="stopmotion">King Kong</li>
  24. <li data-anim="S" data-gen="lampara genio">Aladdin</li>
  25. <li data-gen="playa muerte">Tiburón</li>
  26. <li data-gen="arena gusano">Dune</li>
  27. <li data-bn="S" data-gen="vampiro">Nosferatu</li>
  28. <li data-bn="S" data-gen="stopmotion">Godzilla</li>
  29. <li data-anim="S" data-gen="robot">Mazinger</li>
  30. <li data-anim="S" data-gen="robot">Evangelion</li>
  31. </ul>
  32. <h2>Resaltar</h2>
  33. <p>
  34. <button onclick="resaltar('anim')">Animación</button>
  35. <button onclick="resaltar('bn')">Blanco y negro</button>
  36. </p>
  37. <p>
  38. Género:
  39. <button onclick="generizar('stopmotion')">stopmotion</button>
  40. <button onclick="generizar('robot')">robot</button>
  41. <button onclick="generizar('muerte')">muerte</button>
  42. </p>
  43. </body>
  44. </html>

Proinf.net