Question

伙计们其实我很想写这段代码，而不是单独为我所有的4个元素重写相同的代码我想编写一个函数，为每个元素调用并执行。

$(function(){
$('#basic').mouseover(function(){
    $('#table-one').css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
    });
$('#basic').mouseout(function(){
    $('#table-one').css({ boxShadow : "0 0 0 0" });
    });

});

$(function(){
$('#standard').mouseover(function(){
    $('#table-two').css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
    });
$('#standard').mouseout(function(){
    $('#table-two').css({ boxShadow : "0 0 0 0" });
    });

 });   

 $(function(){
$('#pro').mouseover(function(){
    $('#table-three').css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
    });
$('#pro').mouseout(function(){
    $('#table-three').css({ boxShadow : "0 0 0 0" });
    });

});

  $(function(){
$('#expert').mouseover(function(){
    $('#table-four').css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
    });
$('#expert').mouseout(function(){
    $('#table-four').css({ boxShadow : "0 0 0 0" });
    });

});

Answer 1

您应该为标记添加数据属性，将触发元素（#standard等）链接到您想要进入的表格。通常，在语义上链接相关元素是明智的，这样代码可以尽可能通用，并应用于页面上的各种元素：

<div id="standard" data-table="#table-one">
...
</div>

现在，您的所有元素都可以使用相同的处理程序：

$(function () {

  $('#basic, #standard, #pro, #expert').mouseOver(function () {
    $($(this).data("table")).css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
  }).mouseout(function () {
    $($(this).data("table")).css({ boxShadow : "0 0 0 0" });
  });

});

note ：您不需要在$(function () { })中包装每个块。一，围绕你发布的整个代码块就足够了。

Answer 2

试试这个

function mouseIn(target) {
    $('#table-' + target).css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
}

function mouseOut(target) {
    $('#table-' + target).css({ boxShadow : "0 0 0 0" });
}

然后使用它们：

$('#expert').hover(
    function() {
        mouseIn('four');
    }, function() {
        mouseOut('four');
    }
);

编辑：更多的过度杀伤（weeehooo）解决方案是迭代它并设置它：

var objs = {'basic': 'one', 'standard': 'two', 'pro': 'three', 'expert': 'four'};
for (var key in objs) {
    $('#' + key).hover(
        function() {
            $('#table-' + objs[key]).css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
        }, function() {
            $('#table-' + objs[key]).css({ boxShadow : "0 0 0 0" });
        }
    );
}

Answer 3

稍微清理并缩短了您的代码：

$(function(){
    $('#basic').mouseover(function(){
        animateIn('#table-one');
        }).mouseout(function(){
        animateOut('#table-one');
        });
    $('#standard').mouseover(function(){
        animateIn('#table-two');
        }).mouseout(function(){
        animateOut('#table-two');
        });
    $('#pro').mouseover(function(){
        animateIn('#table-three');
        }).mouseout(function(){
        animateOut('#table-three');
        });
    $('#expert').mouseover(function(){
        animateIn('#table-four');
        }).mouseout(function(){
        animateOut('#table-four');
        });
    function animateIn(id) {
        $(id).css({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });
    }
    function animateOut(id) {
        $(id).css({ boxShadow : "0 0 0 0" });
    }
});

应该工作，告诉我它是否

Answer 4

如果表位于容器内，则可以执行

 $('#basic', '#standard', '#pro', '#expert').mouseover(function () {
     $(this).find("table").css({
         boxShadow: "0 0 5px 3px rgba(100,100,200,0.4)"
     });
 }).mouseout(function () {
     $(this).find("table")..css({
         boxShadow: "0 0 0 0"
     });
 });

否则你必须使用映射对象

 var map = {
     "basic": "table-one",
     "standard": "table-two",
     "pro": "table-three",
     "expert": "table-four"
 };

 $('#basic', '#standard', '#pro', '#expert').mouseover(function () {
     $("#" + map[this.id]).css({
         boxShadow: "0 0 5px 3px rgba(100,100,200,0.4)"
     });
 }).mouseout(function () {
     $("#" + map[this.id]).css({
         boxShadow: "0 0 0 0"
     });
 });

只是想法如何做到这一点。代码未经过测试。

如何在jquery中编写函数

4 个答案: