javascript - 悬停时显示和隐藏按钮

Question

我正在尝试创建一种效果，如果用户将鼠标悬停在我的其中一个 li 项目上，我会显示一些隐藏在非悬停状态下的按钮。当您将鼠标悬停在评论上时，youtube 正在做同样的事情。我正在尝试这个:

var gButtons = $(generateButtons());

function generateButtons() {
    var html = "<span>Btn1</span><span>Btn2</span>";
    return html;
}

$('#myList').delegate('li', 'hover', function(event) {
    if (event.type == 'mouseover') {
        var element = $(this);
        gButtons.appendTo(element.children('.panelButtons'));
    } else {
        gButtons.remove();
    }
});

<ul id='myList'>
  <li>
    <p>blah a</p>
    <p class='panelButtons'></p>
  <li>
  <li>
    <p>blah b</p>
    <p class='panelButtons'></p>
  <li>
  ...
</ul>

好的，所以我的想法是在启动时创建一次 gButtons 元素。每个 li 元素都有一个类类型为“panelButtons”的空面板。每当用户将鼠标悬停在 li 元素上时，我都会将其附加到当前悬停元素的空“panelButton”部分。

我不确定这是否可行，因为消息的顺序 [un-hover, hover] 必须保持一致。我想避免在页面加载时为每个 li 项目生成按钮标记，因为我可能有大量元素 - 它只是很多额外的内容。

这是解决问题的好方法吗，还有更优化的模式吗？

谢谢

Answer 1

除非有一些特定的原因为什么你想在每个鼠标悬停/鼠标悬停事件上添加和删除，我想我会像 Derrick 建议的那样做，除了我会让 jQuery 为你处理事件。

像这样: http://jsfiddle.net/dFFqZ/

$('#myList').delegate('li', 'hover', function(event) {
    var element = $(this);
    if (event.type == 'mouseover') {
        element.children('.panelButtons').show();
    } else {
        element.children('.panelButtons').hide();
    }
}).find('.panelButtons')
    .append("<span>Btn1</span><span>Btn2</span>").hide();​

这样做会更有效率。

您甚至可以将代码简化为:http://jsfiddle.net/dFFqZ/1/

$('#myList').delegate('li', 'hover', function(event) {
    $(this).children('.panelButtons').toggle( event.type == 'mouseover' );
})
    .find('.panelButtons')
    .append("<span>Btn1</span><span>Btn2</span>").hide();​

编辑:如 @Nick Craver< 所述，将 event.type == 'mouseover' 添加到 .toggle()/em>.