0

首先，我是 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", "");
    });

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

4

4 回答 4

2

使用 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');
});

小提琴

于 2013-06-19T22:20:51.540 回答
1

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

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

// 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");
});

演示在这里。

于 2013-06-19T22:22:47.470 回答
0

你的听众在 '#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 说的那样。

于 2013-06-19T22:16:27.170 回答
0

那是因为处理程序没有直接绑定到各个 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 中硬编码颜色值。

于 2013-06-19T22:19:02.927 回答