(jQuery, HTML) Как генерировать id для каждой новой кнопки?
Здравствуйте. Программа - простой todo list, даёт возможность создавать проекты и таски в каждом проекте. При нажатии на кнопку "add todo list", копируется блок исходного проекта, но копия, в отличие от исходника, не работает. Я так понимаю, что при создании каждого нового проекта, необходимо как-то генерировать id для каждой новой кнопки "Add task", которая находится в каждом клоне-проекте. Подскажите пожалуйста, как это сделать?
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel = "stylesheet" href="style.css"> <style> div, h1{ background-color: #cdf; text-align: center; } #loginblock{ text-align: left; } #addtodolist{ color: #555; } </style> <script> $(document).ready(function () { $('#taskbutton').click(function () { //сохранить таск, в качестве переменной var taskName = $('input[name=newTaskName]').val(); //добавить новый таск //если скопировать таск, то функционал не копируется $('<li class="task"><div class="taskOuter"><div class="taskValue" contenteditable="false"></div>'+ '<div class="taskDescription" contenteditable="false">' + taskName + '<br/><b id="edit">edit</b> | <b id = "delete">delete</b>'+ '</div></div></li>') .hide().prependTo('#taskList').slideDown('fast'); }); //при нажатии на панель таска, удалить его //тут нужно настроить удаление таска при нажатии на кнопку delete $(document).on('click', '.task', function () { $(this).hide('slow', function () { $this.remove(); }); }); $("#addlist").click(function(){// клонирование проекта $("body").clone(); $("#form").clone().appendTo("body", false); }); }); </script> </head> <body> <header> <h1>Simple todo list</h1> </header> <div id="form"> <div class="submitForm"> <form name="TaskForm"> <input type="text" name="newTaskName" class="taskinput" value="" placeholder="Enter your task here" required /> </form> <div id="taskbutton">Add Task</div> </div> <div id="tasksWrapper"> <h2 class="toDoHeader" contenteditable="true">Project name</h2> <ul id="taskList"></ul> </div> </div> <input id="addlist" type = "button" value="add todo list"> </body> </html> |
Blondinka, а зачем строки 5, 6, 7 ?
|
Цитата:
|
Blondinka, :blink: не надо так делать, одной строки 8 будет достаточно в данном случае.
|
Blondinka, .clone(true) чтобы работал клон
|
Цитата:
|
Blondinka, ну клонируйте без кнопки и вставляйте клон после последнего клона или перед кнопкой. Вообще у всех дублируемых элементов может быть class но не как не id, поработайте над этим.
|
Цитата:
|
Цитата:
|
Цитата:
|
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <link rel = "stylesheet" href="style.css"> <style> div, h1{ background-color: #cdf; text-align: center; } #loginblock{ text-align: left; } #addtodolist{ color: #555; } </style> <script> $(document).ready(function () { $('.taskbutton').click(function () { var form = $(this).parents('.form'); var taskName = $(form).find('input[name=newTaskName]').val(); $(form).find('.taskList').append('<div>data: '+taskName+'</div>'); /* дальше пробуй сама ;) если что, спрашивай */ }); /* тут тоже доделать ;) $(document).on('click', '.task', function () { $(this).hide('slow', function () { $this.remove(); }); });*/ $(".addlist").click(function(){ $(this).parent().clone(true, true).appendTo("body", false); }); }); </script> </head> <body> <header> <h1>Simple todo list</h1> </header> <div class="form"> <div class="submitForm"> <form name="TaskForm"> <input type="text" name="newTaskName" class="taskinput" value="" placeholder="Enter your task here" required /> </form> <div class="taskbutton">Add Task</div> </div> <div class="tasksWrapper"> <h2 class="toDoHeader" contenteditable="true">Project name</h2> <ul class="taskList"></ul> </div> <input class="addlist" type = "button" value="add todo list"> </div> </body> </html> |
Цитата:
В строке 65 id для каждой кнопки "Add Task", если я заменю id на class, то новый таск в главном пректе будет добавляться ко всем клонам. Та же ситуация и со строкой 70. |
Skrudjmakdak, большое спасибо. Работает.
|
айдишники там нафик не нужны)) достаточно на классах реализовать
т.е. у тебя происходит событие на кнопке. ты поднимаешься от этой кнопке до div: <div class="form"> с помощью метода parents(/*selector*/) а от него начинаешь искать нужные тебе дочерние элементы используя метод find(/*selector*/) |
Цитата:
|
Цитата:
|
Часовой пояс GMT +3, время: 00:23. |