Как передать значение из input после click? как сделать input уникальный для каждого click?

401

22 ноября 2017, 01:20

Есть такой код. Переменная text берет значение введенное в текстовый input, переменная elemText это кусок кода, который будет прибавляться при клике в соответствующее место. По клику н кнопку с классом main_block_input_field_inputs_button должно добавиться значениe из input в span с классом contenInput (js код). Но на результате выходит не совсем то, что требовалось. Сперва выводит пустое поле, потом только после второго клика присваивает уже значение из input, плюс все значения изменяются в зависимости от нового значения input, то есть н сохраняются. Подскажите, пожалуйста, как сделать так, чтобы значение input было сразу же добавлено после первого клика по кнопке, а так же как сделать так, чтобы значение уже добавленого поля не менялось после добавления нового поля с новым значением input? Cпасибо

$(document).ready(function(){ 
	var text = $('.main_block_input_field_inputs_text'); 
	var elemText = '<li class = "todo_block_list_item">'+ 
		'<div class = "todo_block_list_item_row"><div class = "todo_block_list_item_row_checkbox">'+ 
		'<input type="checkbox" name=""></div><div class = "todo_block_list_item_row_name">'+ 
		'<span class = "contenInput"></span>'+ 
		'</div><div class = "todo_block_list_item_row_edit">'+ 
		'<div><div class = "todo_block_list_item_row_edit_up_block">'+ 
		'<i class="fa fa-caret-up" aria-hidden="true"></i></div><div>'+ 
		'<i class="fa fa-caret-down" aria-hidden="true"></i></div></div>'+ 
		'<div class = "todo_block_list_item_row_edit_pencil_trash">'+ 
		'<i class="fa fa-pencil" aria-hidden="true"></i></div>'+ 
		'<div class = "todo_block_list_item_row_edit_pencil_trash">'+ 
		'<i class="fa fa-trash-o" aria-hidden="true"></i></div></div></div></li>'; 
 
 
 
	$(".main_block_input_field_inputs_button").click(function () { 
		$('.contenInput').text($(text).val()); 
    	$('.todo_block_list').queue(function () { 
    		$(this).prepend(elemText); 
    		$(this).dequeue(); 
     	}); 
     	 
   }); 
 });

* { 
	box-sizing: border-box; 
} 
body { 
	background-color: yellow; 
} 
.main_head { 
	color: black; 
	text-transform: uppercase; 
	text-align: center; 
	font-size: 25px; 
	font-weight: 800; 
} 
.main_block { 
	width: 700px; 
	margin: 0 auto; 
} 
.main_block_top { 
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	background-color: #4271a9; 
	height: 52px; 
} 
.main_block_top:hover { 
	cursor: pointer; 
} 
.main_block_top_left_text { 
	color: white; 
	font-size: 20px; 
} 
.main_block_top_left .fa { 
	margin: 0 20px; 
	color: black; 
	font-size: 25px; 
} 
.main_block_top_right .fa { 
	color: #98b0d2; 
	font-size: 20px; 
} 
.main_block_top_right { 
	position: relative; 
} 
.main_block_top_right .fa-trash-o { 
	margin: 0px 20px 0px 10px; 
} 
.main_block_top_right .fa-pencil { 
	margin: 0px 11px 0px 0px; 
} 
.main_block_top_right .fa-pencil:after { 
	content: ''; 
    position: absolute; 
    width: 1px; 
    height: 20px; 
    background: #98b0d2; 
    margin-left: 10px; 
} 
.main_block_top_right .fa:hover { 
	color: white; 
} 
.main_block_input_field { 
	background-color: #dcdcdc; 
	height: 52px; 
	display: flex; 
	text-align: center; 
	justify-content: space-around; 
} 
.main_block_input_field_plus { 
	display: flex; 
	align-items: center; 
} 
.main_block_input_field .fa-plus { 
	color: #598f70; 
	font-size: 40px; 
} 
.main_block_input_field_inputs { 
	display: flex; 
    align-items: center; 
} 
.main_block_input_field_inputs_text { 
	width: 530px; 
	height: 29px; 
	color: black; 
	padding-left: 15px; 
	box-shadow: inset 0 2px 2px -20px black; 
} 
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
  color: #bbbbbb; 
} 
::-moz-placeholder { /* Firefox 19+ */ 
  color: #bbbbbb; 
} 
:-ms-input-placeholder { /* IE 10+ */ 
  color: #bbbbbb; 
} 
:-moz-placeholder { /* Firefox 18- */ 
  color: #bbbbbb; 
} 
.main_block_input_field_inputs_button { 
	width: 108px; 
	color: white; 
	background-color: #52896a; 
	background: linear-gradient(to top, #52896a, #91c8ab); 
	height: 29px; 
	border: #447557 1px solid; 
	outline: none; 
	border-radius: 0px 5px 5px 0px; 
} 
.main_block_input_field_inputs_button:hover { 
	cursor: pointer; 
} 
.todo_block { 
	background-color: white; 
} 
.todo_block_list { 
	list-style: none; 
	padding: 0px; 
	margin: 0px; 
} 
.todo_block_list_item { 
	border: #e7ebea 1px solid; 
} 
.todo_block_list_item:hover { 
	background-color: #fcfed5; 
	cursor: pointer; 
} 
.todo_block_list_item:hover .todo_block_list_item_row_edit { 
	display: flex; 
} 
.todo_block_list_item_row { 
	display: flex; 
	align-items: stretch; 
	min-height: 48px; 
} 
.todo_block_list_item_row_edit { 
	display: flex; 
	align-items: center; 
	justify-content: space-around; 
	width: 113px; 
	min-height: 48px; 
	display: none; 
	color: #999999; 
	position: relative; 
} 
.todo_block_list_item_row_edit .fa:hover { 
	color: black; 
} 
.todo_block_list_item_row_checkbox { 
	width: 40px; 
	border-right: #efdadf 1px solid; 
	min-height: 48px; 
	display: flex; 
	align-items: center; 
	position: relative; 
} 
.todo_block_list_item_row_checkbox input { 
	margin: 0 auto; 
} 
.todo_block_list_item_row_name { 
	width: 540px; 
	padding-left: 10px; 
	border-right: #e7ebea 1px solid; 
	min-height: 48px; 
    display: flex; 
    align-items: center; 
    color: #999999; 
} 
.todo_block_list_item_row_checkbox:after { 
	content: ''; 
    position: absolute; 
    width: 1px; 
    height: 100%; 
    background: #efdadf; 
    right: -5px; 
} 
.todo_block_list_item_row_edit_pencil_trash { 
	position: relative; 
} 
.todo_block_list_item_row_edit_pencil_trash:before { 
	content: ''; 
    position: absolute; 
    width: 1px; 
    height: 100%; 
    background: #cccccc; 
    left: -13px; 
} 
.todo_block_list_item_row_edit_up_block { 
	border-bottom: 1px solid #999999; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p class = "main_head">simple todo lists</p> 
	<div class = "main_block"> 
		<div class = "main_block_top"> 
			<div class = "main_block_top_left"><i class="fa fa-calendar-check-o" aria-hidden="true"></i><span class = "main_block_top_left_text">Complete the test task for</span></div> 
			<div class = "main_block_top_right"><i class="fa fa-pencil" aria-hidden="true"></i><i class="fa fa-trash-o" aria-hidden="true"></i></div> 
		</div> 
		<div class = "main_block_input_field"> 
			<div class = "main_block_input_field_plus"><i class="fa fa-plus" aria-hidden="true"></i></div> 
			<div class = "main_block_input_field_inputs"> 
				<input type="text" name="text" placeholder="start typing here to create task" class = "main_block_input_field_inputs_text" id = "text" value = ""> 
				<input type="button" name="" value="Add Task" class = "main_block_input_field_inputs_button"> 
			</div> 
		</div> 
		<div class = "todo_block"> 
			<ul class = "todo_block_list"> 
				<li class = "todo_block_list_item"> 
					 
				</li> 
			</ul> 
		</div> 
	</div>

Answer 1

вы в качестве селекторов используете классы, поэтому текст везде и меняется.
Создайте новый элемент, найдите внутри его нужный класс, измените текст, а потом все вместе добавьте к диву. ну и queue тут тоже не понятно к чему.

$(".main_block_input_field_inputs_button").click(function () {
    $(elemText).find(".contenInput")
            .text($(text).val())
            .end()
         .prependTo(".todo_block_list");                
});

$(document).ready(function(){ 
	var text = $('.main_block_input_field_inputs_text'); 
	var elemText = '<li class = "todo_block_list_item">'+ 
		'<div class = "todo_block_list_item_row"><div class = "todo_block_list_item_row_checkbox">'+ 
		'<input type="checkbox" name=""></div><div class = "todo_block_list_item_row_name">'+ 
		'<span class = "contenInput"></span>'+ 
		'</div><div class = "todo_block_list_item_row_edit">'+ 
		'<div><div class = "todo_block_list_item_row_edit_up_block">'+ 
		'<i class="fa fa-caret-up" aria-hidden="true"></i></div><div>'+ 
		'<i class="fa fa-caret-down" aria-hidden="true"></i></div></div>'+ 
		'<div class = "todo_block_list_item_row_edit_pencil_trash">'+ 
		'<i class="fa fa-pencil" aria-hidden="true"></i></div>'+ 
		'<div class = "todo_block_list_item_row_edit_pencil_trash">'+ 
		'<i class="fa fa-trash-o" aria-hidden="true"></i></div></div></div></li>'; 
 
 
 
   $(".main_block_input_field_inputs_button").click(function () { 
       $(elemText).find(".contenInput") 
                .text($(text).val()) 
                .end() 
             .prependTo(".todo_block_list");               	 
   }); 
 });

* { 
	box-sizing: border-box; 
} 
body { 
	background-color: yellow; 
} 
.main_head { 
	color: black; 
	text-transform: uppercase; 
	text-align: center; 
	font-size: 25px; 
	font-weight: 800; 
} 
.main_block { 
	width: 700px; 
	margin: 0 auto; 
} 
.main_block_top { 
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	background-color: #4271a9; 
	height: 52px; 
} 
.main_block_top:hover { 
	cursor: pointer; 
} 
.main_block_top_left_text { 
	color: white; 
	font-size: 20px; 
} 
.main_block_top_left .fa { 
	margin: 0 20px; 
	color: black; 
	font-size: 25px; 
} 
.main_block_top_right .fa { 
	color: #98b0d2; 
	font-size: 20px; 
} 
.main_block_top_right { 
	position: relative; 
} 
.main_block_top_right .fa-trash-o { 
	margin: 0px 20px 0px 10px; 
} 
.main_block_top_right .fa-pencil { 
	margin: 0px 11px 0px 0px; 
} 
.main_block_top_right .fa-pencil:after { 
	content: ''; 
    position: absolute; 
    width: 1px; 
    height: 20px; 
    background: #98b0d2; 
    margin-left: 10px; 
} 
.main_block_top_right .fa:hover { 
	color: white; 
} 
.main_block_input_field { 
	background-color: #dcdcdc; 
	height: 52px; 
	display: flex; 
	text-align: center; 
	justify-content: space-around; 
} 
.main_block_input_field_plus { 
	display: flex; 
	align-items: center; 
} 
.main_block_input_field .fa-plus { 
	color: #598f70; 
	font-size: 40px; 
} 
.main_block_input_field_inputs { 
	display: flex; 
    align-items: center; 
} 
.main_block_input_field_inputs_text { 
	width: 530px; 
	height: 29px; 
	color: black; 
	padding-left: 15px; 
	box-shadow: inset 0 2px 2px -20px black; 
} 
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
  color: #bbbbbb; 
} 
::-moz-placeholder { /* Firefox 19+ */ 
  color: #bbbbbb; 
} 
:-ms-input-placeholder { /* IE 10+ */ 
  color: #bbbbbb; 
} 
:-moz-placeholder { /* Firefox 18- */ 
  color: #bbbbbb; 
} 
.main_block_input_field_inputs_button { 
	width: 108px; 
	color: white; 
	background-color: #52896a; 
	background: linear-gradient(to top, #52896a, #91c8ab); 
	height: 29px; 
	border: #447557 1px solid; 
	outline: none; 
	border-radius: 0px 5px 5px 0px; 
} 
.main_block_input_field_inputs_button:hover { 
	cursor: pointer; 
} 
.todo_block { 
	background-color: white; 
} 
.todo_block_list { 
	list-style: none; 
	padding: 0px; 
	margin: 0px; 
} 
.todo_block_list_item { 
	border: #e7ebea 1px solid; 
} 
.todo_block_list_item:hover { 
	background-color: #fcfed5; 
	cursor: pointer; 
} 
.todo_block_list_item:hover .todo_block_list_item_row_edit { 
	display: flex; 
} 
.todo_block_list_item_row { 
	display: flex; 
	align-items: stretch; 
	min-height: 48px; 
} 
.todo_block_list_item_row_edit { 
	display: flex; 
	align-items: center; 
	justify-content: space-around; 
	width: 113px; 
	min-height: 48px; 
	display: none; 
	color: #999999; 
	position: relative; 
} 
.todo_block_list_item_row_edit .fa:hover { 
	color: black; 
} 
.todo_block_list_item_row_checkbox { 
	width: 40px; 
	border-right: #efdadf 1px solid; 
	min-height: 48px; 
	display: flex; 
	align-items: center; 
	position: relative; 
} 
.todo_block_list_item_row_checkbox input { 
	margin: 0 auto; 
} 
.todo_block_list_item_row_name { 
	width: 540px; 
	padding-left: 10px; 
	border-right: #e7ebea 1px solid; 
	min-height: 48px; 
    display: flex; 
    align-items: center; 
    color: #999999; 
} 
.todo_block_list_item_row_checkbox:after { 
	content: ''; 
    position: absolute; 
    width: 1px; 
    height: 100%; 
    background: #efdadf; 
    right: -5px; 
} 
.todo_block_list_item_row_edit_pencil_trash { 
	position: relative; 
} 
.todo_block_list_item_row_edit_pencil_trash:before { 
	content: ''; 
    position: absolute; 
    width: 1px; 
    height: 100%; 
    background: #cccccc; 
    left: -13px; 
} 
.todo_block_list_item_row_edit_up_block { 
	border-bottom: 1px solid #999999; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p class = "main_head">simple todo lists</p> 
	<div class = "main_block"> 
		<div class = "main_block_top"> 
			<div class = "main_block_top_left"><i class="fa fa-calendar-check-o" aria-hidden="true"></i><span class = "main_block_top_left_text">Complete the test task for</span></div> 
			<div class = "main_block_top_right"><i class="fa fa-pencil" aria-hidden="true"></i><i class="fa fa-trash-o" aria-hidden="true"></i></div> 
		</div> 
		<div class = "main_block_input_field"> 
			<div class = "main_block_input_field_plus"><i class="fa fa-plus" aria-hidden="true"></i></div> 
			<div class = "main_block_input_field_inputs"> 
				<input type="text" name="text" placeholder="start typing here to create task" class = "main_block_input_field_inputs_text" id = "text" value = ""> 
				<input type="button" name="" value="Add Task" class = "main_block_input_field_inputs_button"> 
			</div> 
		</div> 
		<div class = "todo_block"> 
			<ul class = "todo_block_list"> 
				<li class = "todo_block_list_item"> 
					 
				</li> 
			</ul> 
		</div> 
	</div>