Question

我在这里编写了一段代码（没有css样式）：http://jsfiddle.net/X8bVr/

当用户将鼠标悬停在列表输入上（从输入动态生成）时，我正在尝试显示垃圾桶图标。现在，图标在悬停时显示，但在悬停时不会消失。多次鼠标悬停时，它会使每个列表项上的图标数量倍增。

我还想让垃圾桶图标成为删除该特定列表项的链接。

对于优化我的代码的任何其他有用的提示表示赞赏！

$(".input").click(function() {
if ($(this).val() == "Add task...") {
    $(this).val('');
}    
});

$('.input').keypress(function(event){

var keycode = (event.keyCode ? event.keyCode : event.which);

if(keycode == '13' && $('.input').val().length != 0){
    var input = $(".input").val();
    var li = $("<li/>").text(input);
    $("#tasks").prepend(li);
    if ($(".input").val() != "Add task...") {
        $(".input").val('');
    }

    $("li").hover(function() {
        var trashIcon = $("<i class='fa fa-trash-o'></i>");

        $(trashIcon).appendTo($(this)).stop();
    }, function() {
        $(trashIcon).hide();
    });
}

});

Answer 1

尝试查看mouseenter和mouseleave而不是悬停：

1）只需在页面加载时添加图标，然后将其隐藏

var trashIcon = $("<i class='fa fa-trash-o'></i>");
$(trashIcon).appendTo($(this)).stop();
$(trashIcon).hide();

2）悬停时，鼠标进入li元素时显示图标，鼠标离开时隐藏：

$("li").mouseenter(function() {
    $(trashIcon).show();
};
$("li").mouseleave(function() {
    $(trashIcon).hide();
};

Answer 2

这是一个非常小的错误。var trashIcon的范围仅在鼠标位于li时，因此这就是问题所在。

你可以用两种方式修复它

制作var trashIcon全局变量。
使用以下代码。
```
$(this).find('.fa').hide();
```

希望这可以解决您的问题。

修改：

$(trashIcon)是全局的，因此当追加下一个li时，前一个F12将被删除。

您可以通过var trashIcon = $("<i class='fa fa-trash-o'></i>");元素进行检查。

所以这是解决问题的方法。

声明

mouseenter

在您注册mouseleave和{{1}}事件

Fiddle demo 解释更多

在输入生成的列表项的悬停上显示/隐藏图标

2 个答案: