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

Use an argument:

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

将其作为参数传递：

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

Answer 4

如果你有一个包含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();
 });

Answer 5

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

fade('#div1') , fade('#div2')你可以传递任何jquery选择器作为这个函数的输入来淡化它。

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

5 个答案: