Question

我有一个元素列表

<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列表中的特定符号

$('#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

尝试这样

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你可以这样做

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

Answer 3

我认为你可以使用2种方法--css和jQuery

方法1 - 在css方法中，您可以在:hover上隐藏显示按钮，如下所示

#list li button{display:none;}
#list li:hover button{display:block;}

jsfiddle demo - https://jsfiddle.net/dhananjaymane11/ypnajsuc/1/

方法2 - 在jQuery方法中，li内容是动态的，您应该使用on - mouseenter和mouseleave

$('#list').on("mouseenter", "li", function() {
        $(this).append('<button>Button1</button>' 
                    + '<button>Button2</button>');
});
$('#list').on("mouseleave", "li", function() {
        $(this).find('button').remove();
});

jsfiddle demo - https://jsfiddle.net/dhananjaymane11/ypnajsuc/3/

Answer 4

修复您的选择器，现在您选择整个列表，您需要指定项目。

$('#list li').each(function() { ... });

Answer 5

＆＃13;

<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>

＆＃13;

children($int)

＆＃13;

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

5 个答案: