Question

$(document).ready(function() {
    var fadeout = $('#1');
    function runIt() {
        fadeout.delay(500).animate({ opacity: '+1' }, 1000);
        fadeout.delay(500).animate({ opacity: '-0.5' }, 1000, runIt);
    }
    runIt();
});

你能帮我解决一个函数中有多个“ID”的正确方法吗？上面的代码正在运行但是我希望我的函数只有一个，因为我多次使用这个JavaScript代码。

假设我要包含的ID为#1，#2，#3，#4，#5

var fadeout = $('#1', '#2', '#3'. '#4'. '#5');

或制作其他变量。然而，它不起作用。你能帮我么？它工作正常，但我希望我的代码有效。

谢谢！

Answer 1

一种解决方案是将相同的类添加到所有html元素中。然后选择该类的所有元素。

<div id="1" class="someClass"></div>
<div id="2" class="someClass"></div>
<div id="3" class="someClass"></div>
<div id="4" class="someClass"></div>
<div id="5" class="someClass"></div>

<script>
    var fadeout = $('.someClass');
</script>

Answer 2

循环遍历id并在每个上执行runIt函数：

$(document).ready(function() {
    var fadeout = ['#1', '#2', '#3', '#4', '#5'];
    for (i=0;i<fadeout.length;i++) {
      runIt(fadeout[i])
    }

    function runIt(id) {
        $(id).delay(500).animate({ opacity: '+1' }, 1000);
        $(id).delay(500).animate({ opacity: '-0.5' }, 1000, runIt);
    }
    runIt();
});

Answer 3

这很简单，就像下面这样：

var fadeouts = $('#1,#2,#3,#4,#5');
$.each(fadeouts, function(index, fadeout){
   runIt(fadeout);
});
function runIt(fadeout) {
  fadeout.delay(500).animate({opacity:'+1'}, 1000);
  fadeout.delay(500).animate({opacity:'-0.5'}, 1000, runIt);
}

但我建议使用“class”而不是“id”，如下所示：

<div id="1" class="fadeout">1</div>
<div id="2" class="fadeout">2</div>
<div id="3" class="fadeout">3</div>
<div id="4" class="fadeout">4</div>

var fadeouts = $('.fadeout');
$.each(fadeouts, function(index, fadeout){
   runIt(fadeout);
});
function runIt(fadeout) {
  fadeout.delay(500).animate({opacity:'+1'}, 1000);
  fadeout.delay(500).animate({opacity:'-0.5'}, 1000, runIt);
}

Answer 4

定义所有者对象使用的函数：

function runIt() {
  $(this).delay(500).animate({ opacity: '+1' }, 1000);
  $(this).delay(500).animate({ opacity: '-0.5' }, 1000, runIt);
}

然后调用它

$(document).ready(function() {
  $('#1 #2 #3').each(runIt);
  :
});

Answer 5

如果你有选择将课程放在div标签中，你应该按照金枪鱼的答案。如果您没有选项，那么您可以尝试我的代码::

<强> HTML

<div id="1">Hi</div>
<div id="2">Hiii</div>
<div id="3">Hiii</div>
<div id="4">Hiiii</div>
<div id="5">Hiiii</div>

<强>的jQuery

$(document).ready(function () {
        var fadeout = [1, 2, 3, 4, 5];
        function runIt() {
            $.each(fadeout, function (index, value) {
                $('#'+value).delay(500).animate({
                    opacity: '+1'
                },
                1000);
                $('#'+value).delay(500).animate({
                    opacity: '-0.5'
                },
                1000, runIt);
            });
        }
        runIt();
    });

Answer 6

你可以做的是将id传递给函数。

类似的东西：

function runIt(id) {
   $(id).delay(500).animate({ opacity: '+1' }, 1000);
   $(id).delay(500).animate({ opacity: '-0.5' }, 1000);
}
runIt("#1");
runIt("#2");
runIt("#3");
runIt("#4");
runIt("#5");

另一方面，你也可以通过添加一个类来包装它们，然后在该类上调用runIt（class）函数

如何在我的javascript上添加其他ID？

6 个答案: