Форум

frolvict · #1 (**permalink**) 05.04.2010, 11:41

День добрый!
Возникла проблемка небольшая, прошу помочь решить ее.
У меня есть код

<ul id="cat01">
Категории
	<li id="pcat01">Подкатегории</li>
</ul>

я хочу сделать чтоб при нажатии на категориию или кнопку появлялась еще одна категория, но с следующим ид cat02 и при нажатии на подкатегорию появлялись подкатегории тоже со следующим ид pcat="pcat02" и так чтоб можно было добавлять и добавлять.
Сейчас написал вот такой вот код для добавления

<script type="text/javascript">
  
  $(document).ready(function(){
  
  $("li").click(function(){
  $("li").append("<li> Hello!</li>");
  });
  
  $("ul").click(function(){
  $("ul").append("<ul> Hello!</ul>");
  });
  
  });
  
  </script>

Но он почему-то добавляет не по одной категории и подкатегории, а сразу по многу и ид там не меняется. Подскажите плизз как можно реализовать задачу?

x-yuri · #2 (**permalink**) 05.04.2010, 12:20

а чего ты li засовываешь в li, ul - в ul? Где ты меняешь id? И почитай про всплывание событий

frolvict · #3 (**permalink**) 05.04.2010, 12:37

Исправил на это

<script type="text/javascript">
   
  $(document).ready(function(){

  $("ul").click(function(){
  $("li").append("<ul> Hello!</ul>");
  });
   
  });
  </script>

Но почему-то добавляется по 2 <ul> Hello!</ul> при клике
А вот насчет как менять ид, хотел узнать, как это можно сделать?
Подскажите плиззз!

x-yuri · #4 (**permalink**) 05.04.2010, 13:12

почему добавляются 2 <ul> Hello!</ul> из твоего кода непонятно. Либо дай ссылку на страничку, либо прикрепи к сообщению

также непонятно, почему ты в ul текст записываешь, там только li могут быть. И почему ты ul в li добавляешь. Тебе это нужно? Я думал тебе нужно добавлять еще одну такую же категорию, а не создавать подкатегорию (категории, на которой кликнули)

по поводу менять id, а точнее назначать
'<ul id="cat'+id+'" Hello!</ul>'
чтобы вычислить id тебе надо будет найти уже существующие категории, определить их максимальный id и увеличить его на единицу

frolvict · #5 (**permalink**) 05.04.2010, 13:36

Вот вроде с добавлением разобрался, но как можно сделать чтоб подкатегория добавлялась именно для выделенной категории? Сейчас добавляется только для первой

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
 <script type="text/javascript">
 
 $(document).ready(function(){
 	
 	// добавляем действия для кнопки Добавить категорию
 	$("#addCat").click(function(){
 	
 		$("ul:first").after("<ul><li><label><input type='checkbox' />Новая категория</label></li></ul>");
 	
 	}); //--закрытие addCat click
 	
 	// добавляем действие для кнопки Добавить подкатегорию
 	$("#addPcat").click(function(){
 	
 		$("li:first").after("<ul><li><label><input type='checkbox' />Новая подкатегория</label></li></ul>");
 	
 	}); //--закрытие addPcat click
 
 }); //--закрытие document ready
 
 </script>
 
</head>
<body>
<button id="addCat">Добавить категорию</button>
<button id="addPcat">Добавить подкатегорию</button>
		<ul id="tree">
			<li>
				<label>
					<input type="checkbox" />Категория 01
				</label>
			</li>
			<li>
				<label>
					<input type="checkbox" />Котегория 02
				</label>
				<ul>
					<li>
						<label>
							<input type="checkbox" />Подкатегория 01
						</label>
					</li>
				</ul>
			</li>
		</ul>

</body>
</html>

x-yuri · #6 (**permalink**) 05.04.2010, 15:51

например, с помощью :checked находишь выделенный checkbox, по нему находишь родительский ul и добавляешь. То же самое, если выделено более одного checkbox'а

только интерфейс какой-то странный. Я бы кнопки добавления как последний элемент списка указывал

frolvict · #7 (**permalink**) 05.04.2010, 15:56

Боксы выборки это я так для примера указал
На самом деле их не будет

<body>
<button id="addCat">Добавить категорию</button>
<button id="addPcat">Добавить подкатегорию</button>
<button id="dellPcat">Удалить подкатегорию</button>
		<ul id="tree">
			<li>
				<label>
					Категория 01
				</label>
			</li>
			<li>
				<label>
					Котегория 02
				</label>
				<ul>
					<li>
						<label>
							Подкатегория 01
						</label>
					</li>
				</ul>
			</li>
		</ul>

</body>

Можно как-то определить какой выбран <label> к примеру?
Чтоб уже к нему добавлять? Или что-то в этом роде?

frolvict · #8 (**permalink**) 05.04.2010, 22:47

Подскажите плиззз почему могут не добавляться подкатегории в списке?
Именно не добавляются к тем, которые создает скрипт, к тем которые были изначально добавление работает.

Селекторы вроде бы пробовал менять , все равно не получается победить ((

Вот страничка с этим скриптом http://jukrim.ee/jquery/

x-yuri · #9 (**permalink**) 06.04.2010, 00:15

click добавляет обработчики к имеющимся на данный момент элементам. Попробуй live

кроме того не используй селекторы, которые ищут по всему дереву, ограничь их, например, "#tree li label". Да и li здесь лишняя

а вообще я бы назначил обработчик одному родительскому элементу (не проверял, могут быть ошибки)

$('#tree').click( function(e){
    $('label.selected', this).removeClass('selected');
    $(e.target).addClass('selected');
});

или даже

$('#tree').click( function(e){
    $(this.arguments.callee.target).removeClass('selected');
    $(e.target).addClass('selected');
    this.arguments.callee.target = e.target;
});

frolvict · #10 (**permalink**) 06.04.2010, 01:09

Большое спасибо!
Заработало теперь, не догадался бы ни за что что дело в этом click.

А еще вопросик не могли бы уточнить плизз насчет идентификации создаваемых элементов?

-------------------------------------------------------------
по поводу менять id, а точнее назначать
'<ul id="cat'+id+'" Hello!</ul>'
чтобы вычислить id тебе надо будет найти уже существующие категории, определить их максимальный id и увеличить его на единицу
-------------------------------------------------------------

как это можно реализовать? что-то я попробовал но ничего не получилось ((

Форум

Справочник

Discord чат

Курсы javascript