Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.09.2014, 15:27
Интересующийся
Отправить личное сообщение для feoalter7 Посмотреть профиль Найти все сообщения от feoalter7
 
Регистрация: 28.09.2012
Сообщений: 19

Определить куда вставлять содержимое по клику
Доброго времени суток господа!
Введение.
Имеем несколько(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, но при этом при клике по списку, содержимое попадает куда надо. Смотрел их файл, там все сделано прототипами.

Может кто подскажет как правильней и универсальней решить данную задачу?
Ответить с цитированием
  #2 (permalink)  
Старый 03.09.2014, 16:36
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,576

Всё это должно связываться на момент генерации в js объекте.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 03.09.2014, 16:37
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Как вариант... "Без родителей"...

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 03.09.2014, 16:42
Интересующийся
Отправить личное сообщение для feoalter7 Посмотреть профиль Найти все сообщения от feoalter7
 
Регистрация: 28.09.2012
Сообщений: 19

Сообщение от Aetae Посмотреть сообщение
Всё это должно связываться на момент генерации в js объекте.
А вот как между ними установить связь, без DOM?
Ответить с цитированием
  #5 (permalink)  
Старый 03.09.2014, 16:44
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от feoalter7
А вот как между ними установить связь, без DOM?
Как вариант:
- инпутам генерть уникальные ИД
- списку прописывать тот ИД в атрибут
Ответить с цитированием
  #6 (permalink)  
Старый 03.09.2014, 16:47
Интересующийся
Отправить личное сообщение для feoalter7 Посмотреть профиль Найти все сообщения от feoalter7
 
Регистрация: 28.09.2012
Сообщений: 19

Сообщение от ksa Посмотреть сообщение
Как вариант... "Без родителей"...

<!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>
В целом да, а как это перенести в чистый JS теперь..
Ответить с цитированием
  #7 (permalink)  
Старый 03.09.2014, 16:48
Интересующийся
Отправить личное сообщение для feoalter7 Посмотреть профиль Найти все сообщения от feoalter7
 
Регистрация: 28.09.2012
Сообщений: 19

Сообщение от ksa
Как вариант:
- инпутам генерть уникальные ИД
- списку прописывать тот ИД в атрибут
Так же рассматривал вариант расставлять идентификаторы и инкреминировать циферку, но это получается привязка полная к DOM.

Я писал про это..так не пойдет.
Ответить с цитированием
  #8 (permalink)  
Старый 03.09.2014, 16:54
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от feoalter7
Так же рассматривал вариант расставлять идентификаторы и инкреминировать циферку, но это получается привязка полная к DOM.
У нас разное понимание термина "привязка к ДОМ"...
Ответить с цитированием
  #9 (permalink)  
Старый 03.09.2014, 16:55
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от feoalter7
а как это перенести в чистый JS теперь..
1000р за час и нет проблем!
Ответить с цитированием
  #10 (permalink)  
Старый 03.09.2014, 17:01
Интересующийся
Отправить личное сообщение для feoalter7 Посмотреть профиль Найти все сообщения от feoalter7
 
Регистрация: 28.09.2012
Сообщений: 19

Сообщение от ksa Посмотреть сообщение
1000р за час и нет проблем!
Еще часок и будет готово!) Спасибо)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не заменяется содержимое DIV по клику. Помогите разобраться. r4zoom Элементы интерфейса 4 04.09.2013 16:54
По клику на ссылку меняем содержимое внутри блока goooooch Общие вопросы Javascript 6 26.01.2011 15:25