jQuery 代码返回 'Object expected' 错误

Question

我有以下 jQuery 代码。像这样写两个事件监听器好吗？以下代码抛出一个错误

$(document).ready(function () {
    $('tr').hover(
        function () {
            $(this).css('background-color', '#FFFF99');
            $(this).contents('td').css({
                'border': '1px solid red', 
                'border-left': 'none', 
                'border-right': 'none' 
            });
            $(this).contents('td:first').css('border-left', '1px solid red');
            $(this).contents('td:last').css('border-right', '1px solid red');
        });

        $('#radioButtonImageSourceContainerId input:radio').click(function () {
            if ($(this).val() === 'fromFile') {
                addVisibility("from-file");
                removeVisibility("from-url");
            } 
            else if ($(this).val() === 'fromUrl') {
                removeVisibility("from-file");
                addVisibility("from-url");
            }
        })
    });

另外两个函数是

function addVisibility(elemId) {
    document.getElementById(elemId).style.display = "";
    if (document.getElementById(elemId).style.visibility == "hidden") {
        document.getElementById(elemId).style.visibility = "visible";
    }
}

function removeVisibility(elemId) {
    document.getElementById(elemId).style.display = "";
    if (document.getElementById(elemId).style.visibility == "visible") {
        document.getElementById(elemId).style.visibility = "hidden";
    }
}

Answer 1

检查并确保您首先找到了一个元素。

function addVisibility(elemId) {
    var el = document.getElementById(elemId);
    if( el )
        el.style.display = "";
        if (el.style.visibility == "hidden") {
            el.style.visibility = "visible";
        }
    } else {
        console.log( 'NO ELEMENT WAS FOUND' );
    }
}

...并缓存您的 DOM 选择而不是重复它。

另一个问题是这些行:

$(this).contents('td').css({...
$(this).contents('td:first')...
$(this).contents('td:last')...

contents() 方法也返回文本节点。您应该使用 find 或 children 来代替。

$(this).find('td').css({...
$(this).children('td').css({...

<小时/>

在我看来，重写这一部分(使用 jQuery)的更好方法是:

$(document).ready(function () {
    $('tr').hover(function () {
        $(this).addClass( 'hilite_row' );
        var tds = $(this.cells).addClass( 'hilite_cell' );
        tds.first().addClass( 'hilite_left_cell' );
        tds.last().addClass( 'hilite_right_cell' );
    });

    $('#radioButtonImageSourceContainerId input:radio').click(function () {
        var value = $(this).val(),
            visib = ['hidden','visible'],
            file = visib[ +(value === 'fromFile') ],
            url = visib[ +(value === 'fromUrl') ];
        if( file === url ) return;
        $("#from-file").css('visibility', file);
        $("#from-url").css('visibility', url);
    })
});

然后在 CSS 中定义类的样式。

<小时/>

或者更好的是，使用 :hover 伪选择器并在 CSS 中完成所有操作，尽管 IE6 不起作用。