Question

首先，我是js / jquery的新手。我有一个列表，可以修改并添加到由以下定义的页面中： <ol id="elementlist"></ol>

在页面加载时，它是一个空列表。使用JQuery将列表项附加到它。

我希望能够将鼠标悬停在每个元素上并更改颜色。我使用JQuery提供的on（）函数完成了这个：

// highlight on mouseover 
$("#elementlist").on("mouseover", "li", function(){
        $(this).css("background-color","#f2fdf2");
    });

// restore white background    
$("#elementlist").on("mouseout", "li", function(){ 
        $(this).css("background-color","#ffffff");
    });

我还希望能够双击li，突出显示并突出显示。当悬停在该元素上时，这也应禁用更改颜色。我可以双击并更改颜色，但我无法使用以下代码禁用悬停处理程序：

// highlights on double click, but doesn't disable mouseover/mouseout
$("#elementlist").on("dblclick", "li", function(){
        $(this).css("background-color","#f2d2d2");
        $(this).off("mouseover", "");
        $(this).off("mouseout", "");
    });

我无法仅禁用已单击的特定列表项（其他列表项仍应能够突出显示）。任何帮助将不胜感激。

Answer 1

使用data（）或类来设置突出显示的状态，并检查：

$("#elementlist").on({
    mouseenter: function(){
        if (!$(this).hasClass('highlight')) $(this).css("background-color","#f2fdf2");
    },
    mouseleave: function() {
        if (!$(this).hasClass('highlight')) $(this).css("background-color","#fff");
    },
    dblclick: function() {
        $(this).css("background-color","#f2d2d2").addClass('highlight');
    }
}, 'li');

您也可以使用CSS执行大部分操作：

#elementlist li {background-color : #f2fdf2}
#elementlist li:hover {background-color : #fff}
#elementlist li.highlight, #elementlist li.highlight:hover {background-color : f2d2d2}

并保持点击处理程序

$("#elementlist").on('dblclick', 'li', function() {
    $(this).addClass('highlight');
});

FIDDLE

Answer 2

事件绑定到父ol，off()使用li无效，因为它们没有绑定事件。

一种解决方案是将事件绑定到没有li类的disabledhover。然后双击添加这样的类。

// highlight on mouseover 
$("#elementlist").on("mouseover", "li:not(.disabledhover)", function(){
     $(this).css("background-color","#f2fdf2");
});

// restore white background    
$("#elementlist").on("mouseout", "li:not(.disabledhover)", function(){ 
     $(this).css("background-color","#ffffff");
});

// highlights on double click, but doesn't disable mouseover/mouseout
$("#elementlist").on("dblclick", "li", function(){
     $(this).css("background-color","#f2d2d2");
     $(this).addClass("disabledhover");
});

<强> Demo here

Answer 3

你的监听器在'#elementList'元素上，这就是off（）不起作用的原因。

http://jsfiddle.net/blackjim/HShzg/1/

$("li", "#elementlist")
.on("mouseover", function(){
    // highlight on mouseover 
    $(this).css("background-color","#f2fdf2");
})
.on("mouseout", function(){ 
    // restore white background   
    $(this).css("background-color","#ffffff");
})
.on("dblclick", function(){
    // highlights on double click, but doesn't disable mouseover/mouseout
    $(this).css("background-color","#f2d2d2");
    $(this).off();
});

PS：如果你的列表有很多元素，也许这么多听众都不是一个好主意，你应该想一个打开/关闭绑定的“标志”方式，比如@nnnnnn说。

Answer 4

那是因为处理程序没有直接绑定到各个li元素，但当然你不能在父元素上使用.off()，否则它不适用于任何li元素。你可以这样做：

$("#elementlist").on("mouseover", "li", function(){
    if (!$(this).hasClass("fixedBackground"))
        $(this).css("background-color","#f2fdf2");
});
// restore white background    
$("#elementlist").on("mouseout", "li", function(){
    if (!$(this).hasClass("fixedBackground"))
        $(this).css("background-color","#ffffff");
});
$("#elementlist").on("dblclick", "li", function(){
    $(this).css("background-color","#f2d2d2")
           .addClass("fixedBackground");
});

演示：http://jsfiddle.net/t8c23/

也就是说，双击时，向该元素添加一个类，该类指示其背景不应再次更改，并在该类的mouseover / out处理程序测试中添加。

理想情况下，您可以在样式表中定义新类，以便通过类设置背景颜色，而不是直接在JS中对颜色值进行硬编码。

不能使用off（）关闭事件处理程序与动态列表（jquery）的事件处理程序？

4 个答案: