16.08.2014, 22:10
|
Профессор
|
|
Регистрация: 21.03.2014
Сообщений: 173
|
|
(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, 17.08.2014 в 00:33.
|
|
16.08.2014, 23:36
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Blondinka, а зачем строки 5, 6, 7 ?
|
|
16.08.2014, 23:48
|
Профессор
|
|
Регистрация: 21.03.2014
Сообщений: 173
|
|
Сообщение от Rise
|
Blondinka, а зачем строки 5, 6, 7 ?
|
На всякий случай, подключила несколько jquery-библиотек. Таким образом, если код не сработает, то это скорее всего будет ошибка в коде, а не в несоответствии версии подключаемой библиотеки.
|
|
16.08.2014, 23:53
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Blondinka, не надо так делать, одной строки 8 будет достаточно в данном случае.
|
|
17.08.2014, 01:13
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Blondinka, .clone(true) чтобы работал клон
|
|
17.08.2014, 10:07
|
Профессор
|
|
Регистрация: 21.03.2014
Сообщений: 173
|
|
Сообщение от Rise
|
Blondinka, .clone(true) чтобы работал клон
|
Клонирование работает, а вот кнопка "Add task", в каждом клонированом случае, нет.
|
|
17.08.2014, 14:30
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Blondinka, ну клонируйте без кнопки и вставляйте клон после последнего клона или перед кнопкой. Вообще у всех дублируемых элементов может быть class но не как не id, поработайте над этим.
|
|
20.08.2014, 16:11
|
Профессор
|
|
Регистрация: 21.03.2014
Сообщений: 173
|
|
Сообщение от Rise
|
Blondinka, ну клонируйте без кнопки и вставляйте клон после последнего клона или перед кнопкой. Вообще у всех дублируемых элементов может быть class но не как не id, поработайте над этим.
|
У всех дублирующихся элементов (кроме кнопки с id) итак общие классы. Я думаю, поставить счётчик в цикле, который будет при создании каждого клона, добавлять кнопку с инкрементированным id. Но еще не знаю, как это реализовать без дублирования кода. В каждый проект должно добавляться любое количество тасков. Кнопки должны работать отдельно друг от друга.
|
|
20.08.2014, 16:26
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Сообщение от Blondinka
|
У всех дублирующихся элементов (кроме кнопки с id) итак общие классы.
|
А в строках 59, 65, 67, 70 ты не видишь id?
|
|
20.08.2014, 16:27
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,123
|
|
Сообщение от Blondinka
|
Я так понимаю, что при создании каждого нового проекта, необходимо как-то генерировать id для каждой новой кнопки "Add task", которая находится в каждом клоне-проекте.
|
Встречный вопрос - зачем тебе вообще ИД для тех "кнопок"?
|
|
|
|