Question

startSliding($("div").eq(0));
startSliding($("div").eq(1));
startSliding($("div").eq(2));

我想知道是否有不同的方法只添加一个代码而不是每次重复eq选择器。

startSliding($("div").eq(unlimited));

完整的js文件是：

startSliding($("div").eq(0));
startSliding($("div").eq(1));
startSliding($("div").eq(2));
startSliding($("div").eq(3));

    function startSliding (div) {

      var i = 0;
      var tid = null;
      var sec = 1/3; // <- you want 1 here
      var images = $("img", div).map(function () {
        return $(this).attr("src");
      }).get();

      $("img:gt(0)", div).remove();
      $("img", div).hover(function () {
        var $this = $(this);
        tid = setInterval(function () {
          i = (i + 1) % images.length;
          $this.attr("src", images[i]);
        }, 1000 * sec);
      }, function () {
        clearInterval(tid);
        $(this).attr("src", images[0]);
      });
    }

我在另一个问题中得到了这个问题，其中一个人帮助了我很多，但现在正在努力我的项目得到更多的想法，我在页面中的DIV正在改变，有时在一个页面我有时候有10个div 50.为每个div添加eq选择器也会在pagespeed中生效。因此，如果有一个较短的代码，相同的工作将很高兴知道。我是一个新的javascript :( https://jsfiddle.net/jhudrp8v/11/

谢谢！

Answer 1

这样做非常简单。你必须使用 .each（） jquery方法。

检查以下代码段 -

// Added code
let elem = $('div.someclass');

elem.each(function(i) {
   startSliding(elem.eq(i));
});

// Your code
function startSliding (div) {
  var i = 0;
  var tid = null;
  var sec = 1/3; // <- you want 1 here
  var images = $("img", div).map(function () {
    return $(this).attr("src");
  }).get();

  $("img:gt(0)", div).remove();
  $("img", div).hover(function () {
    var $this = $(this);
    tid = setInterval(function () {
      i = (i + 1) % images.length;
      $this.attr("src", images[i]);
    }, 1000 * sec);
  }, function () {
    clearInterval(tid);
    $(this).attr("src", images[0]);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass">
  <img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
  <img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
  <img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
  <img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
  <img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
  <img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
  <img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
  <img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
  <img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
  <img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
  <img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
  <img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
  <img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
  <img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
  <img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>
<div class="someclass">
  <img height="150" src="https://i.stack.imgur.com/BDcMh.gif">
  <img height="150" src="https://i.stack.imgur.com/vfQCT.gif">
  <img height="150" src="https://i.stack.imgur.com/MbEgw.gif">
  <img height="150" src="https://i.stack.imgur.com/uCCEw.gif">
  <img height="150" src="https://i.stack.imgur.com/iO6QE.gif">
</div>

有关 .each（）的详情，请参阅https://api.jquery.com/eq/

希望这会对你有所帮助:)。

jquer .eq选择器的任何更短的方式？

1 个答案: