Определить куда вставлять содержимое по клику
Доброго времени суток господа!
Введение. Имеем несколько(2 например) полей для ввода. Вот таких <input class="search_show_list" type="text" tabindex="1" autocomplete="off"> Эти поля генерируются скриптом в цикле. Под каждым таким input'ом, есть список ul, вот такой <ul class="list_modules"> <li class="search_item" data-value="1">Вася</li> <li class="search_item" data-value="2">Петя</li> </ul> Эти списки вместе с input'ом создаются скриптом Задача. При клике на любой из li списка, содержимое этого li помещалось бы в его (который выше) input. Варианты. Сразу хочу сказать что вариант типа подниматься по родителям, не подходит. Хотелось бы универсальности, а то вдруг возникнет необходимость в еще одном узле, сами понимаете цепочка из родителей работать перестанет. Так же рассматривал вариант расставлять идентификаторы и инкреминировать циферку, но это получается привязка полная к DOM. Cчитаю решение не очень (может ошибаюсь). Еще вариант. нашел вот что http://harvesthq.github.io/chosen/. посмотрел что у них все классы одинаковые, нет привязки к DOM, но при этом при клике по списку, содержимое попадает куда надо. Смотрел их файл, там все сделано прототипами. Может кто подскажет как правильней и универсальней решить данную задачу? |
Всё это должно связываться на момент генерации в js объекте.
|
Как вариант... "Без родителей"... :)
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function (){
$('.search_item').click(function (){
var val=$(this).data('value');
$(this.parentNode).prevAll('.search_show_list').eq(0).val(val);
});
});
</script>
</head>
<body>
<input class="search_show_list" type="text" tabindex="1" autocomplete="off">
<p>test 1</p>
<ul class="list_modules">
<li class="search_item" data-value="1">Вася</li>
<li class="search_item" data-value="2">Петя</li>
</ul>
<input class="search_show_list" type="text" tabindex="2" autocomplete="off">
<p>test 2</p>
<ul class="list_modules">
<li class="search_item" data-value="1">Вася</li>
<li class="search_item" data-value="2">Петя</li>
</ul>
</body>
</html>
|
Цитата:
|
Цитата:
- инпутам генерть уникальные ИД - списку прописывать тот ИД в атрибут |
Цитата:
|
Цитата:
Я писал про это..так не пойдет. |
Цитата:
|
Цитата:
|
Цитата:
|
Ну ёбана... Яж сказал как нормальные люди это делают.
Вот максимально упрощённый пример. |
Aetae, идею понял. Спасибо!)
|
Aetae, имею еще один вопрос. Описываю суть кода, представленного ниже: есть список по нажатию по элементу списка, этот элемент попадает в другой список (а из первого убирается display: none;), и к нему прибаляется крестик, чтобы можно было удалить этот выбранный элемент, так вот при нажатии на крестик из выбранных он удаляется (removeChild) и должен вернуться назад в список начальный (элементу должен присваиваться display: none;), но не понимает скрипт к какому элементу имеет отношение удаленный элемент..скрипт ниже.
подскажите, как установить связь между удаляемым элементом и тем откуда он был изначально добавлен. т.е. по сути сделать откат. Добавили из списка, попал во второй список, удалили из второго списка, вернулся в первый.
var itemList = document.querySelectorAll('.item');
for(var i = 0, count = itemList.length; i < count; i++) {
var itemListC = itemList[i];
itemListC.onclick = function(e) {
console.log(itemListC);
var id = e.currentTarget.dataset.selectNumber;
e.currentTarget.style.display = 'none';
var btnClose = document.createElement('span');
btnClose.className = 'chosen_item_close';
btnClose.setAttribute('data-value', id);
btnClose.innerHTML = 'х';
btnClose.onclick = function(e, itemListC){
console.log(itemListC);
itemListC.style.display = 'block';
btnClose.parentNode.parentNode.removeChild(btnClose.parentNode);
}
newLiElem.appendChild(btnClose);
}
}
|
| Часовой пояс GMT +3, время: 06:58. |