Question

我正在尝试用JQuery创建一个搜索词拼图框。基本上每个单元格中都有一个字母表，用户需要通过单击表格单元格来查找和标记网格中的单词。所以我试图通过以下方式组合点击和悬停事件：

鼠标悬停时，所有单元格都应具有悬停突出显示效果，除非已单击它。如果单击它，它应该只是更改为不同的颜色来标记活动选择，以便删除悬停效果。再次单击所选单元格后，它应恢复到其原始状态，并添加悬停高亮效果。进一步的点击只会重复上面提到的切换。

怎么可能？我用unbind（），bind（）选项尝试了以下操作，但它没有用。谢谢，阿提拉

$("#puzzleTable td").each(function(){
$(this).hover(
   function(){
       $(this).css("background-color", "#FF6633");
   },
   function() {
       $(this).css("background-color", "#99CC00");
   }).toggle(
       function(){
       $(this).unbind('mouseenter mouseleave'),
       $(this).css("background-color", "#006699")
       },
       function(){      
       $(this).css("background-color", "#99CC00"),              
       $(this).bind('mouseenter mouseleave')
       }
   );
});

Answer 1

我会通过绑定两个事件来完成所有操作：点击和悬停。这些中的每一个都有自己的逻辑，可以独立运作。此外，由于你想做的只是改变化妆品的变化，你可以通过添加/删除CSS类而不是直接更新CSS（即使用内联样式）来实现。

这是一个小提琴：http://jsfiddle.net/VCf3E/

示例函数（未从示例代码中获取的类和颜色）：

$('table td')
    .hover(
   function(){
       $(this).addClass('hover');
   },
   function() {
       $(this).removeClass('hover');
   })
    .click(
    function() {
       $(this).toggleClass('active');
});

Answer 2

您的代码在重新绑定mouseenter和mouseleave事件时未指定事件处理程序。但是，如果使用CSS类来应用样式，则根本不必取消绑定和重新绑定鼠标事件。只需定义“点击”状态规则，以便它们覆盖“悬停”状态规则。这非常简单，特别是如果您不需要支持IE6（以下包含的IE6解决方案）：

CSS样式：

td {
    background-color: #99CC00;
}

td:hover {
    background-color: #FF6633;
}

td.clicked, td.clicked:hover {
    background-color: #006699;
}

使用Javascript：

$("#puzzleTable td").click(function () { $(this).toggleClass('clicked'); });

如果你需要支持IE6，它会变得有点复杂（因为IE6只支持锚元素上的:hover）：

CSS：

td {
    background-color: #99CC00;
}

td.hover {
    background-color: #FF6633;
}

td.clicked {
    background-color: #006699;
}

使用Javascript：

var cells = $('#puzzleTable td');
cells.bind('mouseenter mouseleave', function() { $(this).toggleClass('hover'); });
cells.click(function() { $(this).toggleClass('clicked'); });

悬停的元素然后单击删除悬停效果并再次单击再次添加悬停

2 个答案: