Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 20.08.2014, 16:52
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

<!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>
Ответить с цитированием
  #12 (permalink)  
Старый 21.08.2014, 11:10
Профессор
Отправить личное сообщение для Blondinka Посмотреть профиль Найти все сообщения от Blondinka
 
Регистрация: 21.03.2014
Сообщений: 173

Сообщение от Rise Посмотреть сообщение
А в строках 59, 65, 67, 70 ты не видишь id?
В строке 59 id формы. Формы будут содержать разную информацию, потому тут id.
В строке 65 id для каждой кнопки "Add Task", если я заменю id на class, то новый таск в главном пректе будет добавляться ко всем клонам. Та же ситуация и со строкой 70.
Ответить с цитированием
  #13 (permalink)  
Старый 21.08.2014, 11:16
Профессор
Отправить личное сообщение для Blondinka Посмотреть профиль Найти все сообщения от Blondinka
 
Регистрация: 21.03.2014
Сообщений: 173

Skrudjmakdak, большое спасибо. Работает.
Ответить с цитированием
  #14 (permalink)  
Старый 21.08.2014, 11:21
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

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

т.е. у тебя происходит событие на кнопке. ты поднимаешься от этой кнопке до div:
<div class="form">
с помощью метода parents(/*selector*/)
а от него начинаешь искать нужные тебе дочерние элементы используя метод find(/*selector*/)
Ответить с цитированием
  #15 (permalink)  
Старый 21.08.2014, 11:27
Профессор
Отправить личное сообщение для Blondinka Посмотреть профиль Найти все сообщения от Blondinka
 
Регистрация: 21.03.2014
Сообщений: 173

Сообщение от ksa Посмотреть сообщение
Встречный вопрос - зачем тебе вообще ИД для тех "кнопок"?
Потому что генерация нового id кнопки "Add task", показалась мне наиболее простым и очевидным решением.
Ответить с цитированием
  #16 (permalink)  
Старый 21.08.2014, 11:34
Профессор
Отправить личное сообщение для Blondinka Посмотреть профиль Найти все сообщения от Blondinka
 
Регистрация: 21.03.2014
Сообщений: 173

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery для placeholder работает только для первого input в ie Nailya jQuery 1 13.05.2014 09:57
Как узнать реальный borderLeftWidth для TD в FireFox? gadyuka Events/DOM/Window 2 14.07.2013 11:58
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00
Как сделать чтобы у textarea увеличивался rows с каждой новой строчкой rusbody Общие вопросы Javascript 1 19.03.2011 16:43
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30