Проблема, когда я нажимаю кнопку редактирования, все другие элементы слушают щелчок, но мне нужен только тот, на котором я нажимаю - PullRequest
Новая
       0

Проблема, когда я нажимаю кнопку редактирования, все другие элементы слушают щелчок, но мне нужен только тот, на котором я нажимаю

0 голосов
/ 10 апреля 2020 

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<meta charset="UTF-8">
	<title>todo</title>
</head>
<body>
	<div class="container">
		<h1 class="text">To Do App</h1>
		<hr>
		<div class="input">
		<input id="input-text" type="text" name="" value="">
		<button id="btn">Add</button>
		</div>
		<div class="to-do">
			<h3 class="text color1">TO-do-list</h3>
			<hr>

			<ul id="toDoList">
		
				
			</ul>
		</div>
		<div class="completed">
			<h3 class="text color">Completed</h3>
		<hr>
			<ul id="completed">
			
				
			</ul>
		</div>
	</div>

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src= "js/todo.js"></script>
</body>
</html>

$('#btn').on('click', function() {
  let newTask = $('#input-text');
  if (newTask.val() === '') {
    alert('You need to write something');
  } else {
    let editButton = ('<button class = edit > Edit' + '</button>');
    let finishedButton = ('<button class = finished > Finished' + '</button>');
    let deleteButton = ('<button class = delete > Delete' + '</button>');

    let input = `<input disabled  value="${newTask.val()}" >`;


   
    $('#toDoList').append('<li>' +input+ editButton + finishedButton + deleteButton + '</li>');
 	
    
    newTask.val('');
  }
  
  $('.edit').on('click', function() {
  	
  	$('input').prop('disabled',false);

  	

   
  });
  
  $('.finished').on('click', function() {
    $(this).parent();
    $('#completed').append($(this).parent());
  });

  $('.delete').on('click', function() {
    $(this).parent().fadeOut(500, function() {
      $(this).remove();
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Проблема, когда я нажимаю кнопку редактирования, все остальные элементы слушают щелчок, но мне нужен только один, на который я нажимаю. Я впервые работаю с кодированием, у меня есть другие проблемы с моим кодом, спасибо заранее за помощь. Проблема, когда я нажимаю кнопку редактирования, все другие элементы слушают щелчок, но мне нужен только тот, на котором я нажимаю. Я впервые работаю с кодированием, у меня есть другие проблемы с моим кодом, спасибо.

1 Ответ

0 голосов
/ 10 апреля 2020

Ваша проблема с этим кодом: 

  $('.edit').on('click', function() {
    $('input').prop('disabled',false);
  });

В нем говорится, что ВСЕ элементы с классом 'edit' сделают ВСЕ элементы 'input' отключенными удаленными.

Так что вам придется убедитесь, что функция будет применяться только к тому, который вы хотите редактировать.

Я сделал небольшое редактирование здесь

, чтобы показать вам принципала. Я создал счетчик 'count'. При добавлении элемента я увеличиваю счет на 1 (count ++) и присваиваю его атрибуту данных на кнопке.

Я также присваиваю текстовому полю уникальный идентификатор 'field' + count, поэтому он будет равен ссылка editbutton.

вы можете видеть, что onlick теперь будет использовать атрибут данных для каждой кнопки редактирования, поэтому он может изменить соответствующее поле.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...