追加按钮列表使用悬停

我有元素追加按钮列表使用悬停

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

和两个文本字段的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(); 
          } 

         ); 


        });

来源

2016-06-11 Merian

请缩进和正确格式化你的代码，然后检查是否有适合的套装......你可能会丢失的括号？ – tmthydvnprt

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

方法1 - CSS中的方法，你可以简单地隐藏秀上:hover按钮如下

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

的jsfiddle演示 - 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演示 - https://jsfiddle.net/dhananjaymane11/ypnajsuc/3/

来源

2016-06-12 02:46:27 DJAy

解决您的选择，现在你'选择整个列表，你需要指定项目。

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

来源

2016-06-11 19:34:49 bryan60

根本不是这种情况。 –

实际上是这样。这很好，但其他人已经指出.hover（）可以用于多个元素，所以你不需要.each（），但问题的核心是他的选择器正在选择整个列表比列表元素，就像我说的。 – bryan60

尝试像这样

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

来源

2016-06-11 19:35:32

这是我正在寻找的解决方案，但仍然不起作用，我认为这是因为我通过使用jQuery追加ul列表中的元素，它们不在html中。 – Merian

如果你为此创建了一个jsfiddle，可以查找你实际面临的问题 –

我更新了我的问题，谢谢 – Merian

你可以像下面这样做

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

来源

2016-06-11 19:37:56

$("#list li").hover(function() { 
 
    $(this).html('<button>button1</button><button>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>

来源

2016-06-11 19:41:16

追加按钮列表使用悬停

回答

相关问题