Добавление элементов при нажатии
День добрый!
Возникла проблемка небольшая, прошу помочь решить ее. У меня есть код <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>
Но он почему-то добавляет не по одной категории и подкатегории, а сразу по многу и ид там не меняется. Подскажите плизз как можно реализовать задачу? |
а чего ты li засовываешь в li, ul - в ul? Где ты меняешь id? И почитай про всплывание событий
|
Исправил на это
<script type="text/javascript">
$(document).ready(function(){
$("ul").click(function(){
$("li").append("<ul> Hello!</ul>");
});
});
</script>
Но почему-то добавляется по 2 <ul> Hello!</ul> при клике А вот насчет как менять ид, хотел узнать, как это можно сделать? Подскажите плиззз! |
почему добавляются 2 <ul> Hello!</ul> из твоего кода непонятно. Либо дай ссылку на страничку, либо прикрепи к сообщению
также непонятно, почему ты в ul текст записываешь, там только li могут быть. И почему ты ul в li добавляешь. Тебе это нужно? Я думал тебе нужно добавлять еще одну такую же категорию, а не создавать подкатегорию (категории, на которой кликнули) по поводу менять id, а точнее назначать '<ul id="cat'+id+'" Hello!</ul>' чтобы вычислить id тебе надо будет найти уже существующие категории, определить их максимальный id и увеличить его на единицу |
Вот вроде с добавлением разобрался, но как можно сделать чтоб подкатегория добавлялась именно для выделенной категории? Сейчас добавляется только для первой
<!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>
|
например, с помощью :checked находишь выделенный checkbox, по нему находишь родительский ul и добавляешь. То же самое, если выделено более одного checkbox'а
только интерфейс какой-то странный. Я бы кнопки добавления как последний элемент списка указывал |
Боксы выборки это я так для примера указал
На самом деле их не будет <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> к примеру? Чтоб уже к нему добавлять? Или что-то в этом роде? |
Подскажите плиззз почему могут не добавляться подкатегории в списке?
Именно не добавляются к тем, которые создает скрипт, к тем которые были изначально добавление работает. Селекторы вроде бы пробовал менять , все равно не получается победить (( Вот страничка с этим скриптом http://jukrim.ee/jquery/ |
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;
});
|
Большое спасибо!
Заработало теперь, не догадался бы ни за что что дело в этом click. А еще вопросик не могли бы уточнить плизз насчет идентификации создаваемых элементов? ------------------------------------------------------------- по поводу менять id, а точнее назначать '<ul id="cat'+id+'" Hello!</ul>' чтобы вычислить id тебе надо будет найти уже существующие категории, определить их максимальный id и увеличить его на единицу ------------------------------------------------------------- как это можно реализовать? что-то я попробовал но ничего не получилось (( |
во-первых, зачем эти id?
во-вторых, что именно не получилось? 1) найти все категории (подкатегории) 2) получить список id 3) оставить в списке только числа 4) найти максимальное 5) прибавить единицу 6) вставить полученное число в строку |
Дело в том что у меня вместо этих категорий будет раскрывающией списки в которых будут данные и мне после заполнения всех данных нужно будет все это собрать и передать уже дальше на обработку. Чтоб правильно все было я думаю что нужно идентифицировать все эти создаваемые элементы
Пробую вот так
var idNumber = 0 // задаем переменной начальное число для нумерации элементов
// добавляем действия для кнопки Добавить категорию
$("#addCat").live("click",function(e){
$(".selected").after("<ul><li><label id="cat'+idNumber+'">Новая категория</label></li></ul>");
}); //--закрытие addCat click
Но что-то отказывается работать (( |
а подсветка на форуме тебя не смутила? Посмотри в консоль ошибок. В конце концов попытайся
var idNumber = 0; alert("<ul><li><label id="cat'+idNumber+'">Новая категория</label></li></ul>")
в консоли выполнить Цитата:
UPD: p.s. ты решил пропустить первые 5 пунктов и перейти к шестому? |
А это уже ведь не jquery?
Что мне почитать чтоб начать в этом более или мене разбиратся? Перменные эти и добавление к ид номеров и тд. |
Цитата:
Цитата:
|
Большое спасибо за ответы!
Извини за делитантность ;) я не волшебник ;) только учимся ;) А еще возник вопросик Я пробую увеличить номер ид при создании нового элемента, а меня почему-то вместо сложения получает добавление, хотя все значения числовые. Может я что не так делаю?
var lastId = $("label:last").attr('id');
$(".selected").after('<ul><li><label id="'+(lastId+1)+'">Категория</label></li></ul>');
<ul id="tree">
<li>
<label id="00">
<select class="select_list"></select>
Главная категория
</label>
</li>
</ul>
|
Уже сам разобрался ;)
Функция parseInt() решила проблемку ;) |
| Часовой пояс GMT +3, время: 19:34. |