Question

我有这种情况：

$(".table1 table tbody tr").hover(
    function() {
        $(this).css('background-color', 'red');
    },
    function() {
        $(this).css("background-color", "");
    }
);

$(".table2 table tbody tr").hover(
    function() {
        $(this).css('background-color', 'red');
    },
    function() {
        $(this).css("background-color", "");
    }
);

为避免重复两个函数添加删除css，我想将公共部分隔离成一个函数。我尝试了这个，但我想我有一些关闭问题。

$(".table1 table tbody tr").hover(
    self.setColor(this)
);

$(".table2 table tbody tr").hover(
    self.setColor(this)
);

self.setColor = function(context) {
    return (
        function() {
            $(context).css('background-color', 'antiquewhite');
        },
        function() {
            $(context).css("background-color", "");
        }
    );
};

Answer 1

你正在考虑这个问题。

function onHover(event) {
  $(this).css('background-color', 'red');
}

function onLeave(event) {
  $(this).css('background-color', '');
}

$(".table1 table tbody tr").hover(onHover, onLeave);

你仍然需要传递两个参数，所以制作两个函数并单独传递它们。

Answer 2

我建议使用常见的css类，而不是试图简化函数：

<script> 
     $(".my-table table tbody tr").hover(function() {
            $(this).css('background-color', 'red');
        },
        function() {
            $(this).css("background-color", "");
        });

</script>

当然，您甚至可以通过简单的CSS样式实现这一点（我不确定您是否故意避免使用CSS）：

<style>
 .my-table table tbody tr:hover{
   background-color:red; 
}
</style>

函数concat逗号分隔在一个函数中

2 个答案: