Форум

Blondinka · #1 (**permalink**) 16.08.2014, 22:10

Здравствуйте. Программа - простой 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 · #2 (**permalink**) 16.08.2014, 23:48

Сообщение от Rise

Blondinka, а зачем строки 5, 6, 7 ?

На всякий случай, подключила несколько jquery-библиотек. Таким образом, если код не сработает, то это скорее всего будет ошибка в коде, а не в несоответствии версии подключаемой библиотеки.

Blondinka · #3 (**permalink**) 17.08.2014, 10:07

Сообщение от Rise

Blondinka, .clone(true) чтобы работал клон

Клонирование работает, а вот кнопка "Add task", в каждом клонированом случае, нет.

Blondinka · #4 (**permalink**) 20.08.2014, 16:11

Сообщение от Rise

Blondinka, ну клонируйте без кнопки и вставляйте клон после последнего клона или перед кнопкой. Вообще у всех дублируемых элементов может быть class но не как не id, поработайте над этим.

У всех дублирующихся элементов (кроме кнопки с id) итак общие классы. Я думаю, поставить счётчик в цикле, который будет при создании каждого клона, добавлять кнопку с инкрементированным id. Но еще не знаю, как это реализовать без дублирования кода. В каждый проект должно добавляться любое количество тасков. Кнопки должны работать отдельно друг от друга.

ksa · #5 (**permalink**) 20.08.2014, 16:27

Сообщение от Blondinka

Я так понимаю, что при создании каждого нового проекта, необходимо как-то генерировать id для каждой новой кнопки "Add task", которая находится в каждом клоне-проекте.

Встречный вопрос - зачем тебе вообще ИД для тех "кнопок"?

skrudjmakdak · #6 (**permalink**) 20.08.2014, 16:52

<!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>

Blondinka · #7 (**permalink**) 21.08.2014, 11:10

Сообщение от Rise

А в строках 59, 65, 67, 70 ты не видишь id?

В строке 59 id формы. Формы будут содержать разную информацию, потому тут id.
В строке 65 id для каждой кнопки "Add Task", если я заменю id на class, то новый таск в главном пректе будет добавляться ко всем клонам. Та же ситуация и со строкой 70.

Blondinka · #8 (**permalink**) 21.08.2014, 11:16

Skrudjmakdak, большое спасибо. Работает.

skrudjmakdak · #9 (**permalink**) 21.08.2014, 11:21

айдишники там нафик не нужны)) достаточно на классах реализовать

т.е. у тебя происходит событие на кнопке. ты поднимаешься от этой кнопке до div:
<div class="form">
с помощью метода parents(/*selector*/)
а от него начинаешь искать нужные тебе дочерние элементы используя метод find(/*selector*/)

Blondinka · #10 (**permalink**) 21.08.2014, 11:27

Сообщение от ksa

Встречный вопрос - зачем тебе вообще ИД для тех "кнопок"?

Потому что генерация нового id кнопки "Add task", показалась мне наиболее простым и очевидным решением.

Форум

Справочник

Discord чат

Курсы javascript