当我点击编辑按钮时出现问题，所有其他元素都听点击，但我只需要我点击的那个
[英]A problem when i click on edit button, all the other elements listen to the click but i need just the one i click on
问题描述
<.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>
A problem when i click on edit button, all the other elements listen to the click but i need just the one i click on.
当我点击编辑按钮时出现问题，所有其他元素都听点击，但我只需要我点击的那个。 It's my first time working with coding, do i have another problems with my code, thank u for help in advance.这是我第一次使用编码，我的代码是否还有其他问题，提前感谢您的帮助。 A problem when i click on edit button, all the other elements listen to the click but i need just the one i click on.当我点击编辑按钮时出现问题，所有其他元素都听点击，但我只需要我点击的那个。 It's my first time working with coding, do i have another problems with my code, thx.这是我第一次使用编码，我的代码是否还有其他问题，谢谢。
1 个解决方案
解决方案1
0 已采纳 2020-04-10 08:32:19
Your problem is with this code:您的问题在于此代码：
$('.edit').on('click', function() {
$('input').prop('disabled',false);
});
It says ALL elements with class 'edit' will make ALL 'input' elements have disabled removed.它说所有带有 class 'edit' 的元素将使所有'输入'元素都被禁用删除。
So you will have to make sure the function will only apply to the one you want to edit.因此，您必须确保 function 仅适用于您要编辑的那个。
I made a small edit here我在这里做了一个小编辑
just to show you the principal.只是为了给你看校长。 I created a counter 'count'.我创建了一个计数器“计数”。 When adding an item i up the count by 1 (count++) and asign it to a data- atttribute on the button.添加项目时，我将计数增加 1（计数++）并将其分配给按钮上的数据属性。
I also give the textfield a unique ID 'field'+count so it will be equal to the editbutton link.我还给文本字段一个唯一的 ID 'field'+count，这样它就等于编辑按钮链接。
you can see that the onlick will now use the data attribute for each edit button, so it can alter the corresponding field.您可以看到 onlick 现在将为每个编辑按钮使用 data 属性，因此它可以更改相应的字段。
There are plenty more ways to do it, but this will show you the thoughts behind the problem..有很多方法可以做到这一点，但这会告诉你问题背后的想法。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.