Question

我得到的是一张桌子，当你将鼠标悬停在桌子行上时，它会显示带有选项的按钮。我想隐藏按钮，当你悬停特定的列（好吧，表格单元格准确）。

现在我正试图做这样的事情：

$('.f-t-row').on('hover', function(e){
        if(e.target.hasClass('block-checkbox')){
            if (e.type == "mouseenter") {
                $('.f-t-row').find('.table-ghost-buttons').hide(); 
            }
            else { // mouseleave
                $(this).find('.table-ghost-buttons').show(); 
            }
        }
        else {
            if (e.type == "mouseenter") {
                $(this).find('.table-ghost-buttons').show(); 
            }
            else { // mouseleave
                $('.f-t-row').find('.table-ghost-buttons').hide(); 
            }   
        }       
    });

但我不知道是什么问题，因为我不能像那样检查事件目标类：

if(e.target.hasClass('block-checkbox'))

控制台将始终记录以下内容：

对象＃没有方法'hasClass'

您可以在此处看到：http://jsfiddle.net/57aQP/

修复该错误的可能方法是什么，并检查事件目标（鼠标悬停）是否获得特定类？

Answer 1

这是因为e.target不是jQuery对象，你必须像$(e.target)那样构建它，但它与$(this)相同。

代码：

$('.f-t-row').on('hover', function (e) {
    if ($(e.target).hasClass('block-checkbox')) {
        if (e.type == "mouseenter") {
            $('.f-t-row').find('.table-ghost-buttons').hide();
        } else { // mouseleave
            $(this).find('.table-ghost-buttons').show();
        }
    } else {
        if (e.type == "mouseenter") {
            $(this).find('.table-ghost-buttons').show();
        } else { // mouseleave
            $('.f-t-row').find('.table-ghost-buttons').hide();
        }
    }
});

演示：http://jsfiddle.net/IrvinDominin/57aQP/1/

Jquery - 在父项上显示时隐藏子项上的元素

1 个答案: