Como puedo agregar una clase a un li sino la tiene o eliminarla si la tiene

publicado por: Anonymous

Estoy agregando unos elementos

  • dinámicamente mediante Jquery a una página cada vez que le doy clic al botón.

    Tengo en el archivo de css la siguiente clase:

    ul li.marked {
      color: #ABABA4;
      text-decoration: line-through;
    }
    

    Ahora lo que quiero es que si le doy clic a un li y no tiene la clase marked la agregue y lo contrario, si la tiene, eliminarla, creo que debería usar addClass y removeClass, pero no lo tengo muy claro como debería usar ese condicional para verificar si el elemento tiene o no la clase y hacer lo respectivo según el caso.


    style.css

    body {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    
    .list {
      display: inline-block;
      width: 330px;
    
      vertical-align: top;
      margin: 0 50px;
    

    }

    ul {
      font-size: 18px;
      background-color: #f5f5f2;
      padding: 0;
      min-height: 50px;
      border: 1px solid #DBDBD3;
    

    }

    ul li {
      color: #66665D;
      list-style-type: none;
      padding: 20px;
      cursor: pointer;
      border-bottom: 1px solid #DBDBD3; 
    }
    
    ul li:last-child {
      border-bottom: none;
    }
    
    ul li.marked {
      color: #ABABA4;
      text-decoration: line-through;
    }
    
    button#add {
      color: #666;
      font-size: 16px;
      width: 100%;
      padding: 10px 0;
    

    }


    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Nuevos elementos</title>
      <link rel='stylesheet' href='style.css'/>
      <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
      <div class="wrapper">
        <div class="list">
          <h3>Elementos:</h3>
          <ul class="elements">
          </ul>
          <button id="add">Agregar elemento</button>
        </div>
      </div>
      <script src='app.js'></script>
    </body>
    </html>
    

    app.js

    // escribe tu código acá
    $(document).ready(function(){
       $('#add').click(function(){
           insertarElemento();
       });
    
        function insertarElemento() {
        $('.elements').append('<li>Elemento ' + ($(".elements li").length));
      }
    });
    

    El efecto al agregarle la clase al li es como de tachado y se difumina el color del texto, ya eso está definido en la regla de css.introducir la descripción de la imagen aquí

    solución

    Utiliza el metodo toggleClass() de jquery. Lo que hace es agregar la clase si existe, de lo contrario la elimina:

    _x000D_

    _x000D_

    // escribe tu código acá_x000D_
    $(document).ready(function(){_x000D_
       _x000D_
       $('#add').click(function(){_x000D_
           insertarElemento();_x000D_
       });_x000D_
       _x000D_
    _x000D_
       // aqui definimos el evento sobre los li creados_x000D_
       $(".elements").on("click", "li", function(){_x000D_
        // agregamos o eliminamos la clase del elemento_x000D_
         $(this).toggleClass("marked")_x000D_
       });_x000D_
        function insertarElemento() _x000D_
        {_x000D_
          $('.elements').append('<li>Elemento ' + ($(".elements li").length));_x000D_
        }_x000D_
    });

    _x000D_

    body {_x000D_
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;_x000D_
    }_x000D_
    _x000D_
    .list {_x000D_
      display: inline-block;_x000D_
      width: 330px;_x000D_
    _x000D_
      vertical-align: top;_x000D_
      margin: 0 50px;_x000D_
    }_x000D_
    _x000D_
    ul {_x000D_
      font-size: 18px;_x000D_
      background-color: #f5f5f2;_x000D_
      padding: 0;_x000D_
      min-height: 50px;_x000D_
      border: 1px solid #DBDBD3;_x000D_
    }_x000D_
    _x000D_
    ul li {_x000D_
      color: #66665D;_x000D_
      list-style-type: none;_x000D_
      padding: 20px;_x000D_
      cursor: pointer;_x000D_
      border-bottom: 1px solid #DBDBD3; _x000D_
    }_x000D_
    _x000D_
    ul li:last-child {_x000D_
      border-bottom: none;_x000D_
    }_x000D_
    _x000D_
    ul li.marked {_x000D_
      color: #ABABA4;_x000D_
      text-decoration: line-through;_x000D_
    }_x000D_
    _x000D_
    button#add {_x000D_
      color: #666;_x000D_
      font-size: 16px;_x000D_
      width: 100%;_x000D_
      padding: 10px 0;_x000D_
    }

    _x000D_

    <!DOCTYPE html>_x000D_
    <html lang="en">_x000D_
    <head>_x000D_
      <meta charset="UTF-8">_x000D_
      <title>Nuevos elementos</title>_x000D_
      <link rel='stylesheet' href='style.css'/>_x000D_
      <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>_x000D_
    </head>_x000D_
    <body>_x000D_
      <div class="wrapper">_x000D_
        <div class="list">_x000D_
          <h3>Elementos:</h3>_x000D_
          <ul class="elements">_x000D_
          </ul>_x000D_
          <button id="add">Agregar elemento</button>_x000D_
        </div>_x000D_
      </div>_x000D_
    _x000D_
    </body>_x000D_
    </html>

    _x000D_

    _x000D_

    _x000D_

    Respondido por: Anonymous
  • Leave a Reply

    Your email address will not be published. Required fields are marked *