How can I add a class to a li if I do not have it or delete it if I have one

Question

How can I add a class to a li if I do not have it or delete it if I have one

Navigation

#1 by (1 votes)

0

I'm adding some elements

dynamically by Jquery to a page every time I click the button.

I have the following class in the css file:

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

Now what I want is that if I click on a li and it does not have the marked class I add it and the opposite, if it has it, delete it, I think I should use addClass and removeClass, but I do not have it very clear as it should use that conditional to verify if the element has or not the class and do the respective according to the case.

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));
  }
});

The effect of adding the class to the li is like strikethrough and the color of the text is blurred, and that is defined in the css rule.

jquery html5 css3

asked by García Henry 28.10.2017 в 03:12

source

1 answer

Temporary redirect 302 to new domain with .htaccess how can I select one of the 6 arrays at random? [closed]

score 1 · Accepted Answer

Use the toggleClass() method of jquery. What it does is add the class if it exists, otherwise it eliminates it:

// escribe tu código acá
$(document).ready(function(){
   
   $('#add').click(function(){
       insertarElemento();
   });
   

   // aqui definimos el evento sobre los li creados
   $(".elements").on("click", "li", function(){
    // agregamos o eliminamos la clase del elemento
     $(this).toggleClass("marked")
   });
    function insertarElemento() 
    {
      $('.elements').append('<li>Elemento ' + ($(".elements li").length));
    }
});

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;
}

<!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>

</body>
</html>