使用jQuery的.each（）函数将函数附加到多个幻灯片容器 [英] Using jQuery's .each() function to attach a function to multiple slideshow containers

问题描述

 < div class在一页网站上有很多小的jQuery Cycle幻灯片div（容器） =foo bardata-value =1000> // data-value vary on each container 
< img src =directory / img_0.jpgalt =img 0/> 
< img src =directory / img_1.jpgalt =img 1/> 
< img src =directory / img_2.jpgalt =img 2/> 
< / div> 
  

并且想要将它们全部循环 - 每个幻灯片div具有不同的数据值 - 无需硬编码/重复

  $（document）.ready（function（）{
 $（ '.foo.bar'）。cycle（{
 speed：300，
 timeout：6000，
 delay：$（'。foo.bar'）。data（'value'）
}）; 
}）; 
  

可用于此类幻灯片div的所有发生。我如何附加或绑定或链接这样的jQuery函数到每个幻灯片div，以便每个元素使用不同的数据值？我怀疑jQuery的.each（）函数可以让我这样做 - 但是怎么做？

编辑小提琴

<正如你所提到的那样， .each（）可以让你很轻松地做到这一点：

b
$ b

  $（'。foo.bar'）。each（function（）{
 $（this）.cycle（{
速度：300，
超时：6000，
延迟：$（this）.data（'value'）
}）; 
}）; 
  

在 .each 回调中，这个指的是你当前正在操作的元素。

I have very many small jQuery Cycle slideshow divs (containers) on a one-page website like

    <div class="foo bar" data-value="1000"> // data-value varies on each container
        <img src="directory/img_0.jpg" alt="img 0" />
        <img src="directory/img_1.jpg" alt="img 1" />
        <img src="directory/img_2.jpg" alt="img 2" />
    </div>

and want to cycle them all - with each slideshow div having a different data-value - without hard coding/repeating

$(document).ready(function() {
  $('.foo.bar').cycle({
      speed: 300,
      timeout: 6000,
      delay: $('.foo.bar').data('value')
  });
});

for all occurences of such slideshow div. How can I "attach" or "bind" or "link" such jQuery function to each slideshow div so that each element's differing data-value is used? I suspect that jQuery's .each() function could allow me to do so - but how?

EDIT fiddle

Thank you very much in advance!

解决方案

As you mention, .each() will let you do this quite easily:

$('.foo.bar').each(function() {
    $(this).cycle({
      speed: 300,
      timeout: 6000,
      delay: $(this).data('value')
    });
});

Inside the .each callback, this refers to the element you are currently operating on.

这篇关于使用jQuery的.each（）函数将函数附加到多个幻灯片容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！