javascript - 如何在同一页面中多次重用 JavaScript 函数？

Question

我有以下代码：

Javascript：

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script type="text/javascript">
 $(function() {
 var transition = 'slow';
 var target = $('#somediv');
 target.delay(5000).fadeIn();
 });
 </script>

HTML：

 <div id="somediv">Some Content</div>
 <div id="second_div">Some second content</div>
 <div id="third_div">Some third content</div>

如您所见，上面的函数可以与#somediv 一起使用，但是如何为#second_div 和#third_div 重用相同的函数？

我是 Javascript 新手，所以如果这是一个愚蠢的问题，请原谅我。谢谢！

Answer 1

<script type="text/javascript">
 $(function(){
    fade($("#yourElement"), 5000)
 });

 function fade(element, delay) {
     var transition = 'slow';
     var target = element;
     target.delay(delay).fadeIn();
 }
</script>

然后你可以将对象本身传递到任何你想要的地方，比如：

fade($("#yourOtherElement"), 1000);

请注意，您可以传递不同的时间延迟，或者甚至可以选择设置默认时间延迟：

function fade(element, delay) {
    if(typeof delay === 'undefined') delay = 5000;

     var transition = 'slow';
     var target = element;
     target.delay(delay).fadeIn();
 }    

然后，如果您想使用默认时间延迟，只需传递第一个参数：

fade($("#yourOtherElement")); //will have 5000ms as delay time

Answer 2

使用参数：

function stuff(idstr) {
   var transition = 'slow';
   var target = $('#'+idstr);
   target.delay(5000).fadeIn();
};

$(function() {
   stuff('somediv');
   stuff('second_div');
   stuff('third_div');
});

如果要更改时间延迟，请为该数字传递第二个参数：

function stuff(idstr, del) {
   var transition = 'slow';
   var target = $('#'+idstr);
   target.delay(del).fadeIn();
};

$(function() {
   stuff('somediv',5000);
   stuff('second_div',2000);
   stuff('third_div',3000);
});

http://jsfiddle.net/mblase75/cnH7d/

Answer 3

function fade(selector){
    var target = $(selector);
    target.delay(5000).fadeIn();
}

fade('#div1') , fade('#div2')您可以将任何 jquery 选择器作为输入传递给此函数以淡化它。

Answer 4

将其作为参数传入：

<script type="text/javascript">
    function divFunc(divId, timeDelay) {
        var transition = 'slow';
        var target = $("#" + divId);
        target.delay(timeDelay).fadeIn();
    }
</script>

Answer 5

如果你有一个包含 div，你可以像这样制作一个 jquery 选择器来获取所有 3 个 div

  <div id="somediv">Some Content</div>
  <div id="second_div">Some second content</div>
  <div id="third_div">Some third content</div>

js：

$(function() {
 var transition = 'slow';
 var target1 = $('#somediv');
 var target2 = $('#second_div');
 var target3 = $('#third_div');
 target1.delay(5000).fadeIn();
 target2.delay(target2Time).fadeIn();
 target3.delay(target3Time).fadeIn();
 });