3

En este ejemplo necesito que al div #fijo se le añada antes con un .preppend el div que se haya seleccionado de la lista de "prefijados" y tras esto si seguimos añadiendo "prefijados" éstos se añadan antes del último prefijado y si des-seleccionamos todo que el proceso vuelva a empezar.

Ejemplo
Si hago click en Prefijado 2 : se añadirá el div #prefijado2 antes de #fijo
Si hago click en Prefijado 3 : se añadirá el div #prefijado3 antes de #prefijado2
Si des-selecciono todo: se retirarán los divs y volverá a añadirse cualquiera de los 3 antes de #fijo.

*{margin:0; padding:0}
#container{width:100%; position:absolute; top:50px;}
#fijo{width:50%; height:100px; background:red; margin-left:25%;}
#prefijado1{width:50%; height:100px; background:cyan; margin-left:25%;}
#prefijado2{width:50%; height:100px; background:yellow; margin-left:25%;}
#prefijado3{width:50%; height:100px; background:green; margin-left:25%;}
ul{display:table; position:fixed; text-align:center;}
il{display:table-cell;}
<div id="container">
  <ul>
    <li>Prefijado1 <input type="checkbox" id="pref1" value="prefijado1"></li>
    <li>Prefijado2 <input type="checkbox" id="pref2" value="prefijado2"></li>
    <li>Prefijado3 <input type="checkbox" id="pref3" value="prefijado3"></li>
  </ul>
  <div id="fijo">
  </div>
</div>

2
  • Si los id de los checkbox tienen id="prefijadoX", entonces no sería lógico agregar un <div id="prefijadoX">, al menos según la especificación.
    – Shaz
    Commented el 26 oct. 2016 a las 18:10
  • Sí perdona @shaz fue un despiste al simplificar el código para la pregunta ahora mismo lo corrijo
    – Ivan Soler
    Commented el 26 oct. 2016 a las 18:12

2 respuestas 2

4

El código JS realiza las siguientes acciones:

  • Al hacer click sobre cualquiera de los checkbox, si el mismo esta checked, agrega un div con id igual al value del checkbox. La ubicacion del mismo sera justo antes del div#fijo o, si contador fuera mayor a 0, antes del hermano anterior n al div#fijo. Al mismo tiempo incrementa el valor de la variable privada contador para guardar una referencia a la cantidad de elementos agregados.

  • Al hacer click sobre cualquiera de los checkbox, si el mismo no esta checked, elimina el div con id igual al value del checkbox. Luego decrementa el valor de la variable privada contador para actualizar la referencia a la cantidad de elementos agregados.

(function() {
  var contador = 0;
  $fijo = $('#fijo');

  // Al hacer click en los checkboxs
  $('#container input').on('click', function() {
    var $check = $(this),
      id = $check.val(),
      $hermano = $fijo,
      $div;

    if ($check.prop('checked')) {
      $div = $('<div id="' + id + '">');

      // Agregamos contenido HTML al $div
      $div.html('<span>Texto aquí</span>');

      // Si ya agregamos, buscamos el "n" hermano anterior de #fijo o #fijo
      $hermano = contador ? $fijo.prevAll().eq(contador - 1) : $fijo;
      $div.insertBefore($hermano);
      contador++;
    } else {
      $('#' + id).remove();
      contador--;
    }
  });
})();
*{margin:0; padding:0}
#container{width:100%; position:absolute; top:50px;}
#fijo{width:50%; height:100px; background:red; margin-left:25%;}
#prefijado1{width:50%; height:100px; background:cyan; margin-left:25%;}
#prefijado2{width:50%; height:100px; background:yellow; margin-left:25%;}
#prefijado3{width:50%; height:100px; background:green; margin-left:25%;}
ul{display:table; position:fixed; text-align:center;}
il{display:table-cell;}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="container">
  <ul>
    <li>Prefijado1 <input type="checkbox" id="pref1" value="prefijado1"></li>
    <li>Prefijado2 <input type="checkbox" id="pref2" value="prefijado2"></li>
    <li>Prefijado3 <input type="checkbox" id="pref3" value="prefijado3"></li>
  </ul>
  <div id="fijo">
  </div>
</div>

5
  • Sería mucho mejor para el OP si añadieras una pequeña descripción de tu código. Commented el 26 oct. 2016 a las 21:02
  • He agregado una pequeña descripción de lo que hace el código JS
    – Marcos
    Commented el 26 oct. 2016 a las 21:22
  • Muchas gracias Marcos por la ayuda, la verdad es que es una repuesta impecable. Una última duda; ¿cómo haría si el div #prefijado2 no solo tuviese propiedades css sino también un <span> ? Gracias!
    – Ivan Soler
    Commented el 26 oct. 2016 a las 21:42
  • Fijate ahora, he agregado una linea donde le agrego contenido HTML al $div que se crea.
    – Marcos
    Commented el 26 oct. 2016 a las 21:46
  • eres Dios... :)
    – Ivan Soler
    Commented el 26 oct. 2016 a las 22:12
1

// buscamos los checkboxes    
var items = document.querySelectorAll('input[type="checkbox"]');
var container = document.getElementById("container")
var ul = document.querySelector("ul")

// añadimos el evento de click
for (var i = 0, item=items[0]; i<items.length; ++i, item=items[i])
{
    item.addEventListener('click', function(){
        this.checked ? insert(this.value) : remove(this.value);

    })

}

// la funcion insert
var insert = function( new_id )
{
  var div = document.createElement("div");
  div.id = new_id;
  ul.parentNode.insertBefore(div, ul.nextSibling)
}

// la funcion eliminar
var remove = function( id )
{
    var div = document.getElementById(id)
    div.parentNode.removeChild(div);
}
*{margin:0; padding:0}
#container{width:100%; position:absolute; top:50px;}
#fijo{width:50%; height:100px; background:red; margin-left:25%;}
#prefijado1{width:50%; height:100px; background:cyan; margin-left:25%;}
#prefijado2{width:50%; height:100px; background:yellow; margin-left:25%;}
#prefijado3{width:50%; height:100px; background:green; margin-left:25%;}
ul{display:table; position:fixed; text-align:center;}
il{display:table-cell;}
<div id="container">
  <ul>
    <li>Prefijado1 <input type="checkbox" id="pref1" value="prefijado1"></li>
    <li>Prefijado2 <input type="checkbox" id="pref2" value="prefijado2"></li>
    <li>Prefijado3 <input type="checkbox" id="pref3" value="prefijado3"></li>
  </ul>
  <div id="fijo">
  </div>
</div>

Por lo que entiendo, quieres ir añadiendo los divs antes que el div fijo, en el orden en el que se clican. En la pregunta dices que se utilice la funcion prepend. Prepend, por lo que yo tengo entendido, inserta un elemento al inicio del nodo especificado

Description: Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

pero tu lo que quieres es insertar nodos antes o despues de un nodo concreto, con lo cual te adjunto mi solución hecha en js puro.

El truco esta en la funcion insert encontrada aqui Lo que hace es acceder al nodo padre del nodo referencia (para poder usar insert before), y lo coloca inmediatamente antes del siguiente hermano del nodo referencia. Lo que conlleva que lo situe despues del nodo referencia.

Aqui tienes el ejemplo completo funcionando link

Tu Respuesta

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

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