Tema: Seleccionar / marcar elemento con JQUERY
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/05/2010, 12:56
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 9 meses
Puntos: 20
Seleccionar / marcar elemento con JQUERY
Buenas compis,

Tengo un problema a la hora de marcar y desmarcar elementos. Me explico. Parto de una lista de elementos

Código HTML: 
Ver original
  1. <ul class="lista">
  2.     <li>1</li>
  3.     <li>2</li>
  4.     <li>3</li>
  5.     <li>4</li>
  6.     <li>5</li>
  7.     <li>6</li>
  8. </ul>


Y lo que quiero es que el usuario pueda marcar y/o desmarcar los elementos a su antojo, esto me es util si puedo saber que elementos se marcaron finalmente, se puede saber?

El código que he conseguido crear solo marca, no encuentro la forma de desmarcar un elemento marcado!!

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/v1.98/DTD/v1.98-strict.dtd">
  2. <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
  3. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4. <title>Marcando elementos</title>
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. $(document).ready(function() {
  8.     $("li").click(function () {  
  9.       $(this).addClass('activo');
  10.     });
  11.     $("li.activo").click(function () {  
  12.       $(this).removeClass('activo');
  13.     });
  14. });
  15. </script>
  16. <style type="text/css">
  17. .lista {
  18.     padding:10px;
  19.     margin:0px;
  20.     list-style:none;
  21.     width:50px;
  22. }
  23. .lista li {
  24.     display:block;
  25.     height:18px;
  26.     text-decoration:none;
  27.     color:#666666 !important;
  28.     padding:1px 5px 1px 5px;
  29.     border:1px solid #ffffff;
  30. }
  31. .lista li:hover {
  32.     border:1px solid #e53500;
  33.     text-decoration:none;
  34. }
  35.  
  36. li.activo{
  37.     background:red;
  38.     width:20px;
  39.     height:20px;
  40.     font-weight:bold;
  41.     color:#fff;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <ul class="lista">
  47.     <li>1</li>
  48.     <li>2</li>
  49.     <li>3</li>
  50.     <li>4</li>
  51.     <li>5</li>
  52.     <li>6</li>
  53. </ul>
  54. </body>
  55. </html>

¿Cómo se haría para desmarcar un elemento que fue marcado?

Muchas gracias de antemano!