Javascript 如何在jquery中编写函数

伙计们，实际上我想很快编写这段代码，而不是为我的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" });
    });

});

试试这个

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');
    }
);

编辑：一个更具杀伤力（weeehoo）的解决方案是迭代所有内容并进行设置：

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" });
        }
    );
}

---

清理并缩短了您的代码：

$(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" });
    }
});

---

如果它不起作用，请告诉我。您应该在标记中添加一个数据属性，将触发元素（

#standard

等）链接到您要点亮的表。通常，明智的做法是在语义上链接相关元素，以便代码尽可能通用，并应用于页面上的各种元素：

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

---

注意：您不需要在

$（函数（）{}）

中包装每个块。一个，围绕您发布的整个代码块，就足够了。

如果表在容器中，您可以这样做

 $('#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"
     });
 });

---

我只是想知道你怎么做。代码没有经过测试。

如果您可以提供一个链接或JSFIDLE，将您所有的代码都放在其中，这样我们就可以看到整个画面了。但是，看起来您可以使用一个类，并使用jquery选择该类，然后在该类中查找一个表？一点html会很有帮助的为什么不使用我在你的这篇文章中给你的函数：？Trogvar它工作得很好谢谢u@HugoY.K. 如果它真的有效，那你为什么不接受它作为一个答案呢？：）谢谢你，伙计，这个-->函数animateIn（id）{$（id）.css（{boxShadow:“05px3pxrgba（100100200,0.4）”）；}是我今天早上要找的，再次谢谢函数animateOut（id）{$（id）.css（{boxShadow:“000”}）；}欢迎你，很高兴解决你的问题！您应该接受答案，将您的问题标记为已解决。请查看此链接：

 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"
     });
 });