Estoy agregando unos elementos
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.
.toggleClass()
– derloopkat el 28 oct. 17 a las 1:16this
y al hacer$(this)
obtienes un objecto jQuery. para asi poder llamar al metodo toggleClass. – derloopkat el 28 oct. 17 a las 1:24