追加按鈕列表使用懸停

我有元素追加按鈕列表使用懸停

<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

追加按鈕列表使用懸停

回答

相關問題