2

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

});
4

4 回答 4

6

您应该向标记添加数据属性，将触发元素（#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" });
  });

});

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

于 2013-07-11T12:12:38.653 回答
0

如果桌子在容器内，你可以做

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

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

于 2013-07-11T12:19:29.457 回答
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" });
    }
});

应该可以，如果不行请告诉我

于 2013-07-11T12:11:54.160 回答
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');
    }
);

编辑：一个更矫枉过正（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" });
        }
    );
}
于 2013-07-11T12:10:25.863 回答