2

Tengo este código:

var elementos = $("#caja1").children("a.list-group-item");
var elementos2 = $("#caja2").children("a.list-group-item");

function asignarClick(elementos) {
  for (var i = 0; i < elementos.length; i++) {
    $(elementos[i]).on("click", function() {
      if (!$(this).hasClass("active")) {
        for (var j = 0; j < elementos.length; j++) {
          if ($(elementos[j]).hasClass("active")) {
            $(elementos[j]).removeClass("active");
          }
        }
        $(this).addClass("active");
        if ($(this).parent().attr("id") == "caja1") {

        }
      }
    });
  }
}

$(function() {
  asignarClick(elementos);
  asignarClick(elementos2);

  $("#arrowUp").css("cursor", "pointer");
  $("#arrowDown").css("cursor", "pointer");

  $("#arrowUp").on("click", function() {
    alert("Flecha arriba");
  });

  $("#arrowDown").on("click", function() {
    var elementos = $("#caja1").children("a.list-group-item");
    for (var i = 0; i < elementos.length; i++) {
      if ($(elementos[i]).hasClass("active")) {
        $(elementos[i]).removeClass("active");
        $(elementos[i]).remove();
        $("#caja1").children().first().addClass("active");
        $("#caja2").append(elementos[i]);
        elementos = $("#caja1").children("a.list-group-item");
        asignarClick(elementos);
        elementos2 = $("#caja2").children("a.list-group-item");
        asignarClick(elementos2);
      }
    }
  });
});
a.active {
  background-color: yellow;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-3">

  <div class="row" style="margin-bottom: 2em">
    <div class="col-md-12">
      <div class="list-group" id="caja1">
        <a href="#" class="list-group-item  list-group-item-danger active">First item</a>
        <a href="#" class="list-group-item list-group-item-danger">Second item</a>
        <a href="#" class="list-group-item list-group-item-danger">Third item</a>
      </div>
    </div>
  </div>

  <div class="row" style="margin-bottom: 3em">
    <div class="col-md-12" style="text-align: center">
      <div class="col-md-6" style="color: #990000">
        <i class="fa fa-2x fa-arrow-up" aria-hidden="true" id="arrowUp"></i>
      </div>
      <div class="col-md-6" style="color: #990000">
        <i class="fa fa-2x fa-arrow-down" aria-hidden="true" id="arrowDown"></i>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="list-group" id="caja2">
        <a href="#" class="list-group-item  list-group-item-danger active">First item</a>
        <a href="#" class="list-group-item list-group-item-danger">Second item</a>
        <a href="#" class="list-group-item list-group-item-danger">Third item</a>
      </div>
    </div>
  </div>

</div>
<div class="col-md-1"></div>

En una caja, si pincho un elemento me lo pone como active y me lo colorea, así mismo me quita el active del elemento que lo estaba. Lo que quiero es que cuando yo haga click en la flecha de bajar me baje el elemento seleccionado en la caja1 a la caja2 y funcione como al principio.

2
  • cuales flechas????
    – sioesi
    el 25 may. 2017 a las 14:05
  • <i class="fa fa-2x fa-arrow-up" aria-hidden="true" id="arrowUp"></i> esto es una flecha, lo que pasa es que es de una libreria que se llama fontawesome. es que me propusieron una edicion, la acepte y no me di cuenta de que era un snippet xD
    – G3l0
    el 25 may. 2017 a las 14:07

2 respuestas 2

4

Demasiado código.

Siguiendo el lema de jQuery de escribe menos, haz más ;-)

Los dos document.on se podrían dejar en uno, pero así estará más claro.

Si tienes alguna duda con el código avisa.

$(function() {

  // Enlazamos eventos para las cajas. Esto es un evento de tipo live, es decir
  // se ejecuta a nivel de document para los elementos que corresponda a la
  // selección indicada. Da igual que se quiten o se pongan elementos.
  $(document).on("click", "div#caja1 a", function() {
    // Le quitamos a todos la clase active
    $('div#caja1 a').removeClass('active');
    // Se la añadimos a quien nos ha invocado
    $(this).addClass("active");
  });

  $(document).on("click", "div#caja2 a", function() {
    $('div#caja2 a').removeClass('active');
    $(this).addClass("active");
  });

  $("#arrowUp").on("click", function() {
    // Elemento con la clase active
    var obj = $("#caja2 a.active");
    // Control por si no existiera ninguno
    if ( obj.length ) {
      obj.removeClass('active');
      $('#caja1').append(obj);
      $("#caja2").children().first().addClass("active");
    }
  });
  
  $("#arrowDown").on("click", function() {
    var obj = $("#caja1 a.active");
    if ( obj.length ) {
      obj.removeClass('active');
      $('#caja2').append(obj);
      $("#caja1").children().first().addClass("active");
    }
  });

});
a.active {
  background-color: yellow;
}

#arrowUp,
#arrowDown {
  cursor: pointer;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-3">

  <div class="row" style="margin-bottom: 2em">
    <div class="col-md-12">
      <div class="list-group" id="caja1">
        <a href="#" class="list-group-item  list-group-item-danger active">First item</a>
        <a href="#" class="list-group-item list-group-item-danger">Second item</a>
        <a href="#" class="list-group-item list-group-item-danger">Third item</a>
      </div>
    </div>
  </div>

  <div class="row" style="margin-bottom: 3em">
    <div class="col-md-12" style="text-align: center">
      <div class="col-md-6" style="color: #990000">
        <i class="fa fa-2x fa-arrow-up" aria-hidden="true" id="arrowUp"></i>
      </div>
      <div class="col-md-6" style="color: #990000">
        <i class="fa fa-2x fa-arrow-down" aria-hidden="true" id="arrowDown"></i>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="list-group" id="caja2">
        <a href="#" class="list-group-item  list-group-item-danger active">First item</a>
        <a href="#" class="list-group-item list-group-item-danger">Second item</a>
        <a href="#" class="list-group-item list-group-item-danger">Third item</a>
      </div>
    </div>
  </div>

</div>
<div class="col-md-1"></div>

2
  • Di como válida la otra porque fue la que use, pero muchísimas gracias, pensaré sobre cambiar parte de mi código por lo que me has puesto ya que es menos denso.
    – G3l0
    el 26 may. 2017 a las 7:26
  • 1
    No pasa nada, las cosas se pueden hacer de diferentes formas y funcionar igual. Personalmente pienso que es mejor utilizar los eventos live de jQuery (on en el document) que ir poniendo y quitando eventos a los elementos del DOM.
    – NetVicious
    el 26 may. 2017 a las 8:40
1

El problema esta en que no haz eliminado el evento click anterior del elemento y como este solo conoce los primeros elementos que estaban ya no reconoce al ultimo puedes hacer 2 cosas:

  1. Usar el metodo .unbind(); para cancelar todos los eventos que tengan
  2. Usar la función asignarClick de una manera mas genérica

var elementos = $("#caja1").children("a.list-group-item");
var elementos2 = $("#caja2").children("a.list-group-item");

function asignarClick(elementos) {
  for (var i = 0; i < elementos.length; i++) {
    $(elementos[i]).unbind();
    $(elementos[i]).on("click", function() {
      if (!$(this).hasClass("active")) {
        for (var j = 0; j < elementos.length; j++) {
          if ($(elementos[j]).hasClass("active")) {
            $(elementos[j]).removeClass("active");
          }
        }
        $(this).addClass("active");
        if ($(this).parent().attr("id") == "caja1") {

        }
      }
    });
  }
}

$(function(){
    asignarClick(elementos);
    asignarClick(elementos2);

    $("#arrowUp").css("cursor","pointer");
    $("#arrowDown").css("cursor","pointer");

    $("#arrowUp").on("click",function(){
        alert("Flecha arriba");
    });

    $("#arrowDown").on("click",function(){
        var elementos = $("#caja1").children("a.list-group-item");
        for(var i = 0; i < elementos.length; i++){
            if($(elementos[i]).hasClass("active")){
                $(elementos[i]).removeClass("active");
                $(elementos[i]).remove();
                $("#caja1").children().first().addClass("active");
                $("#caja2").append(elementos[i]);
                elementos = $("#caja1").children("a.list-group-item");
                asignarClick(elementos);
                elementos2 = $("#caja2").children("a.list-group-item");
                asignarClick(elementos2);
            }    
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-md-3">

  <div class="row" style="margin-bottom: 2em">
    <div class="col-md-12">
      <div class="list-group" id="caja1">
        <a href="#" class="list-group-item  list-group-item-danger active">First item</a>
        <a href="#" class="list-group-item list-group-item-danger">Second item</a>
        <a href="#" class="list-group-item list-group-item-danger">Third item</a>
      </div>
    </div>
  </div>

  <div class="row" style="margin-bottom: 3em">
    <div class="col-md-12" style="text-align: center">
      <div class="col-md-6" style="color: #990000">
        <i class="fa fa-2x fa-arrow-up" aria-hidden="true" id="arrowUp">up</i>
      </div>
      <div class="col-md-6" style="color: #990000">
        <i class="fa fa-2x fa-arrow-down" aria-hidden="true" id="arrowDown">down</i>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="list-group" id="caja2">
        <a href="#" class="list-group-item  list-group-item-danger active">First item</a>
        <a href="#" class="list-group-item list-group-item-danger">Second item</a>
        <a href="#" class="list-group-item list-group-item-danger">Third item</a>
      </div>
    </div>
  </div>

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.