Pre-Añadir un div a otro determinado y tras esto al último elemento añadido

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>
3
задан 26.10.2016, 21:13
2 ответа

cГіdigo JS реализует следующие действия:

  • , сделав click на любом из checkbox, если тот же самый - checked, добавляет один div с id равными value checkbox. Расположение того же самого будет непосредственно перед div#fijo или, если счетчик был превосходящим 0, перед предыдущим братом n в div#fijo. В то же время увеличь стоимость частной переменной contador сохранять ссылку на количество совокупных элементов.

  • , сделав click на любом из checkbox, если тот же самый не checked, удаляет div с id равными value checkbox. Потом decrementa стоимость частной переменной contador обновлять ссылку на количество совокупных элементов.

(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>
4
ответ дан 24.11.2019, 12:53
  • 1
    Быть и # 237; в гораздо лучше для OP, если в и # 241; adieras одна согрешила и # 241; в descripci и # 243; n тебя c и # 243; я говорю. –  Francisco Romero 27.10.2016, 00:02
  • 2
    Я добавил, что одна согрешила, и # 241; в descripci и # 243; n, которого он делает c и # 243; я говорю JS –  Marcos 27.10.2016, 00:22
  • 3
    Большое спасибо Рамы из-за помощи, правда состоит в том, что он, восполняет запас безгрешно. Один и #250; ltima сомневайся; и #191; c и # 243; mo har и # 237; если у div #prefijado2 не только были свойства css а tambi и # 233; n < span>? Спасибо! –  Ivan Soler 27.10.2016, 00:42
  • 4
    Обрати внимание сейчас, я добавил линию, где я добавляю HTML-контент к $div, который создается. –  Marcos 27.10.2016, 00:46
  • 5
    ты - Бог...:) –  Ivan Soler 27.10.2016, 01:12

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

, поскольку я понимаю, ты хочешь пойти aГ±adiendo divs нежели установленный div, в порядке в том, который clican. В вопросе ты говоришь, что использовалась функция prepend. Prepend, поскольку я понимаю, вводит элемент в начало определенного узла

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

, но ты, что ты хочешь, он состоит в том, чтобы вводить узлы раньше или после конкретного узла, с чем я присоединяю тебя я soluciГіn сделанная в js чисто.

Прием находится в функции insert расположенная напротив здесь то, что он делает, состоит в том, чтобы соглашаться на узел отец узла снабжает ссылками (чтобы мочь использовать insert before), и это размещает немедленно перед следующим братом узла ссылка. То, что поддерживает, что я это поместил после узла ссылку.

Здесь у тебя есть полный пример функционируя соединение

1
ответ дан 24.11.2019, 12:53

Теги

Похожие вопросы