dataset_jquery.html

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

Proinf.net