0

Tengo una lista y necesito que al hacer clic sobre uno de los li pase ese elemento a la otra lista, debe de funcionar en ambos sentidos.

Según lo consultado lo puedo hacer mediante appendTo pero en este momento me está pasando la lista completa a la otra lista (se desaparece por completo) y no es eso lo que necesito hacer.

----------
app.js
----------
// escribe tu código acá
$(document).ready(function(){   
   // aqui definimos el evento sobre los li 
   $('.todo').on('click', 'li', function(){
    // Mover elemento li de todo a done     
       $('.todo').appendTo('.done');
   });
}); 


----------
index.html
----------
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tareas terminadas</title>
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <div class="wrapper">
    <div class="list">
      <h3>Por hacer:</h3>
      <ul class="todo">
        <li>Sacar la ropa</li>
        <li>Lavar los platos</li>
        <li>Hacer la cama</li>
        <li>Leer un rato</li>
        <li>Terminar este reto</li>
        <li>Sacar al perro</li>
      </ul>
    </div>

    <div class="list">
      <h3>Hecho:</h3>
      <ul class="done">
      </ul>
    </div>
  </div>
   <!-- incluye acá jQuery y crea la referencia a app.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>


----------
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.done li {
  color: #ABABA4;
  text-decoration: line-through;
}

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

1 respuesta 1

1

La verdad estabas muy muy cerca de lograrlo, solo debías cambiar el selector con el cual estabas moviendo el elemento al otro listado.

Te dejo el código funcionando:

$(document).ready(function(){   
    $('.todo').on('click', 'li', function(){    
       $(this).appendTo('.done');
    });

    $('.done').on('click', 'li', function(){    
       $(this).appendTo('.todo');
    });
});
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.done li {
  color: #ABABA4;
  text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="list">
  <h3>Por hacer:</h3>
  <ul class="todo">
    <li>Sacar la ropa</li>
    <li>Lavar los platos</li>
    <li>Hacer la cama</li>
    <li>Leer un rato</li>
    <li>Terminar este reto</li>
    <li>Sacar al perro</li>
  </ul>
</div>

<div class="list">
  <h3>Hecho:</h3>
  <ul class="done">
  </ul>
</div>
</div>

Al cambiar $(".todo").appendTo('.done'); por $(this).appendTo('.done'); estás haciendo referencia al <li> al cual le acabas de dar click, evitando así que todo el <ul> completo se añadiera a la segunda lista.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.