如何在jquery中写一个函数

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

尝试了这一点

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 2

清理，缩短你的代码位：

$(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 3

你应该将数据属性添加到您的标记，链接触发元件（#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() { })。一个，围绕你发布的整个代码就足够了。

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

的你如何能做到这只是想法。代码未经测试。