javascript - 使用悬停将按钮附加到列表

Question

我有一个 ul 元素列表

<ul id="list">
 </ul>

还有两个文本字段和 html 中的提交按钮

Name: <input type="text" id='name'/><br/>
Surname: <input type="text" id='surname'/><br/>
<button id="submit">Submit</button>

通过单击提交按钮，我将该字段中的元素附加到列表中

$('#submit').click(function(){
                    if($('#name').val()!="" && $('#surname').val()!="") {
                    $('#list').append("<li>" + "Name: " + $('#name').val() + " <br/>Surname: " + $('#surname').val() + "</li>");

                    $('#name').val("");
                    $('#surname').val("");

                }
            });

这就是问题所在: 我想通过使用悬停在此列表中的特定 li 上附加两个按钮，当我在该 li 元素按钮上显示时，当我关闭按钮时隐藏。这是我的代码:

 $("ul").find("li").hover(
          function() {
          $('li').append('<button id="but1">Button1</button>' 
          + '<button id="but2">Button1</button>');}, 
           function(){
                $('#but1').remove();
                $('#but2').remove();
      });

这是另一种尝试，但它在列表的 和 处附加了按钮，而不是在 ul 列表的特定 li 中

$('#list').each(function(){
                    console.log($(this));
                        $(this).hover(
                          function() {
                            $(this).append('<button id="but1">Button1</button>' + '<button id="but2">Button1</button>');
                          }, 
                          function(){
                            $('#but1').remove();
                             $('#but2').remove();
                          }

                          );


                    });

Answer 1

这样试试

$("#list li").hover(function() {
  $(this).append('<button id="but1" >button1</button><button id="but2">button2</button>');
}, function() {
  $(this).empty();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li></li>
  <li></li>
  <li></li>

</ul>