如何将相同的功能应用于不同的对象(How to apply the same function to different objects)

我想知道是否有一种方法可以让我在不同的div在单击时在一个函数中执行相同的任务。这是迄今为止我所拥有的。但是，当我运行此代码时，似乎没有任何事情发生，但我也没有看到任何错误。任何帮助，将不胜感激。

<html> <head> </head> <body> <div id="works"> <div class="dot" onclick="currentSlide(0)"></div> <div class="dot" onclick="currentSlide(1)"></div> <div class="dot" onclick="currentSlide(2)"></div> <div class="dot" onclick="currentSlide(3)"></div> </div> <div class = "image"> <img class = "phone" src = "img/phone.png"> <div class = "ad _0"></div> <div class = "ad _1"></div> <div class = "ad _2"></div> <div class = "ad _3"></div> </div> <script src="jquery-3.1.1.min.js"></script> <script> var slideIndex = 0, frames =[80,154,64,49], counters = [0,0,0,0]; showSlides(slideIndex); function animation(ad, frames, counter) { if (counter < frames){ position = counter * (100/frames); $(ad).css({"background-position": position + "% 0%"}); counter ++; } else { counter = 0; } } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var dots = document.getElementsByClassName("dot"); for (i = 0; i < dots.length; i++) { $("._" + i).css({"visibility": "hidden"}); } $("._" + slideIndex).css({"visibility": "visible"}); setInterval(animation("._" + slideIndex, frames[slideIndex], counters[slideIndex]),150); } </script> </body> </html>

如果我将参数直接插入动画函数中，如下所示：

并像这样调用函数：

setInterval(animation,150);

我得到了我想要的结果，但我不想手动插入每个参数：\

I'm wondering if there's a way for me to make different divs perform the same task in a function when they're clicked on. Here's what I have so far. When I run this code, however, nothing seems to happen but I also don't see any errors. Any help would be appreciated.

<html> <head> </head> <body> <div id="works"> <div class="dot" onclick="currentSlide(0)"></div> <div class="dot" onclick="currentSlide(1)"></div> <div class="dot" onclick="currentSlide(2)"></div> <div class="dot" onclick="currentSlide(3)"></div> </div> <div class = "image"> <img class = "phone" src = "img/phone.png"> <div class = "ad _0"></div> <div class = "ad _1"></div> <div class = "ad _2"></div> <div class = "ad _3"></div> </div> <script src="jquery-3.1.1.min.js"></script> <script> var slideIndex = 0, frames =[80,154,64,49], counters = [0,0,0,0]; showSlides(slideIndex); function animation(ad, frames, counter) { if (counter < frames){ position = counter * (100/frames); $(ad).css({"background-position": position + "% 0%"}); counter ++; } else { counter = 0; } } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var dots = document.getElementsByClassName("dot"); for (i = 0; i < dots.length; i++) { $("._" + i).css({"visibility": "hidden"}); } $("._" + slideIndex).css({"visibility": "visible"}); setInterval(animation("._" + slideIndex, frames[slideIndex], counters[slideIndex]),150); } </script> </body> </html>

If I plug in the parameters directly into the animation function, like below:

and call the function like so:

setInterval(animation,150);

I get the result I want but I don't want to have to manually plug in each parameter :\

最满意答案

setInterval(function() { animation("._" + slideIndex, frames[slideIndex], counters[slideIndex]) }, 150);

问题：您的原始代码setInterval(animation("._" + slideIndex, frames[slideIndex], counters[slideIndex]),150); 调用函数animation并将结果传递给setInterval 。你需要传递一个函数来将 animation封装在一个函数表达式中。

为什么没有错误？ 如果将一个非函数传递给setInterval ，它会在许多浏览器上静默失败。

编辑：谢谢@ user2724072发布完整的代码。看到下面的代码（希望）修复。另外，如果没有任何反应，可能是因为你的css代码。我在这里https://jsfiddle.net/uLq5nry5/3/上克隆了jsfiddle上的代码，并更改了代码以将ad切换为不同的颜色。

码：

<html> <head> </head> <body> <div id="works"> <div class="dot" onclick="currentSlide(0)"></div> <div class="dot" onclick="currentSlide(1)"></div> <div class="dot" onclick="currentSlide(2)"></div> <div class="dot" onclick="currentSlide(3)"></div> </div> <div class = "image"> <img class = "phone" src = "img/phone.png"> <div class = "ad x0"></div> <div class = "ad x1"></div> <div class = "ad x2"></div> <div class = "ad x3"></div> </div> <script src="jquery-3.1.1.min.js"></script> <script> var slideIndex = 0, frames =[80,154,64,49], counters = [0,0,0,0]; showSlides(slideIndex); function animation(ad, frames, counterIndex) { var counter = counters[counterIndex]; if (counter < frames){ position = counter * (100/frames); $(ad).css({"background-position": position + "% 0%"}); counters[counterIndex]++; } else { counter[counterIndex] = 0; } } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var dots = document.getElementsByClassName("dot"); for (i = 0; i < dots.length; i++) { $(".x" + i).css({"visibility": "hidden"}); } $(".x" + slideIndex).css({"visibility": "visible"}); setInterval(animation(".x" + slideIndex, frames[slideIndex], slideIndex),150); } </script> </body> </html>

更改： animation()现在采用counterIndex参数而不是counter参数。此外，具有'_ n '的类被替换为'x n '。在涉及浏览器兼容性时，下划线类名有怪诞的怪癖。

为什么： Javascript没有像C这样的“指针”，所以var counter = counters[i]; counter++; var counter = counters[i]; counter++; 不会改变counters[i]的值counters[i] 。

setInterval(function() { animation("._" + slideIndex, frames[slideIndex], counters[slideIndex]) }, 150);

Problem: Your original code setInterval(animation("._" + slideIndex, frames[slideIndex], counters[slideIndex]),150); calls the function animation and passes the result to setInterval. You need to pass a function that calls animation by wrapping it in a function expression.

Why no errors? If you pass a non-function to setInterval, it fails silently on many browsers.

EDIT: Thanks @user2724072 for posting full code. See the code below for (hopefully) a fix. Also, if nothing happens, it might be because of your css code. I cloned the code on jsfiddle here https://jsfiddle.net/uLq5nry5/3/, and changed the code to switch ad to different color.

Code:

<html> <head> </head> <body> <div id="works"> <div class="dot" onclick="currentSlide(0)"></div> <div class="dot" onclick="currentSlide(1)"></div> <div class="dot" onclick="currentSlide(2)"></div> <div class="dot" onclick="currentSlide(3)"></div> </div> <div class = "image"> <img class = "phone" src = "img/phone.png"> <div class = "ad x0"></div> <div class = "ad x1"></div> <div class = "ad x2"></div> <div class = "ad x3"></div> </div> <script src="jquery-3.1.1.min.js"></script> <script> var slideIndex = 0, frames =[80,154,64,49], counters = [0,0,0,0]; showSlides(slideIndex); function animation(ad, frames, counterIndex) { var counter = counters[counterIndex]; if (counter < frames){ position = counter * (100/frames); $(ad).css({"background-position": position + "% 0%"}); counters[counterIndex]++; } else { counter[counterIndex] = 0; } } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var dots = document.getElementsByClassName("dot"); for (i = 0; i < dots.length; i++) { $(".x" + i).css({"visibility": "hidden"}); } $(".x" + slideIndex).css({"visibility": "visible"}); setInterval(animation(".x" + slideIndex, frames[slideIndex], slideIndex),150); } </script> </body> </html>

Changes: animation() now takes a counterIndex parameter instead of a counter parameter. Also, classes with '_n' are replaced with 'xn'. Underscore classnames have weird quirks when it comes to browser compatibility.

Why: Javascript doesn't have "pointers" like C, so var counter = counters[i]; counter++; won't change the value of counters[i].

更多推荐