hover в jquery не работает в цикле

Рейтинг: 2Ответов: 1Опубликовано: 04.05.2015

http://jsfiddle.net/t7t6tf79/

$(function() {
  var cc = []; // оригинальные изображения

  cc.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/aa7e4f0e04.png");
  cc.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/c2a816da12.png");
  cc.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/c1213e2066.png");
  cc.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/7cf250be32.png");

  var zz = []; // изображения, на которые заменяются блоки 

  zz.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/65dafb633b.png");
  zz.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/e57cce0bf9.png");
  zz.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/58649144f9.png");
  zz.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/ab42d361d8.png");

  $('div').css({
    "width": "200px",
    "height": "200px"
  });
  $("#num0").css({
    "background": "url(" + cc[0] + ")",
    "background-size": "cover"
  });
  $("#num1").css({
    "background": "url(" + cc[1] + ")",
    "background-size": "cover"
  });
  $("#num2").css({
    "background": "url(" + cc[2] + ")",
    "background-size": "cover"
  });
  $("#num3").css({
    "background": "url(" + cc[3] + ")",
    "background-size": "cover"
  });

  for (i = 0; i < cc.length; i++) {
    $("#num" + i).hover(function() {
      $("#num" + i).css({
        "background": "url(" + zz[i] + ")",
        "background-size": "cover"
      });
    }, function() {
      $("#num" + i).css({
        "background": "url(" + cc[i] + ")",
        "background-size": "cover"
      });
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="num0">
</div>
<br>
<div id="num1">
</div>
<br>
<div id="num2">
</div>
<br>
<div id="num3">
</div>

итак есть блоки с изображениями. все изображения записываются в css через jquery в зависимости от их индекса. при наведении на каждый блок должно появляться определённое изображение так же, в зависимости от индекса. присваивать hover каждому блоку вручную не хотелось бы, так как блоков на странице может быть достаточно много. засовывание hover в цикл ни к чему не приводит.

при этом, если вернуть значение после первого проходы цикла, то hover всё-таки работает для первого блока: http://jsfiddle.net/n40oymoy/

$(function() {
  var cc = []; // оригинальные изображения

  cc.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/aa7e4f0e04.png");
  cc.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/c2a816da12.png");
  cc.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/c1213e2066.png");
  cc.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/7cf250be32.png");

  var zz = []; // изображения, на которые заменяются блоки 

  zz.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/65dafb633b.png");
  zz.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/e57cce0bf9.png");
  zz.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/58649144f9.png");
  zz.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/ab42d361d8.png");





  $('div').css({
    "width": "200px",
    "height": "200px"
  });
  $("#num0").css({
    "background": "url(" + cc[0] + ")",
    "background-size": "cover"
  });
  $("#num1").css({
    "background": "url(" + cc[1] + ")",
    "background-size": "cover"
  });
  $("#num2").css({
    "background": "url(" + cc[2] + ")",
    "background-size": "cover"
  });
  $("#num3").css({
    "background": "url(" + cc[3] + ")",
    "background-size": "cover"
  });



  for (i = 0; i < cc.length; i++) {
    $("#num" + i).hover(function() {
      $("#num" + i).css({
        "background": "url(" + zz[i] + ")",
        "background-size": "cover"
      });
    }, function() {
      $("#num" + i).css({
        "background": "url(" + cc[i] + ")",
        "background-size": "cover"
      });
    });
    return
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="num0">

</div>
<br>

<div id="num1">

</div>
<br>

<div id="num2">

</div>
<br>

<div id="num3">

</div>

а если уменьшить переменную на единицу, то изменяется последний блок (!) при наведении на любой другой: http://jsfiddle.net/ddpv7orw/

$(function() {
  var cc = []; // оригинальные изображения

  cc.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/aa7e4f0e04.png");
  cc.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/c2a816da12.png");
  cc.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/c1213e2066.png");
  cc.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/7cf250be32.png");

  var zz = []; // изображения, на которые заменяются блоки 

  zz.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/65dafb633b.png");
  zz.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/e57cce0bf9.png");
  zz.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/58649144f9.png");
  zz.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/ab42d361d8.png");





  $('div').css({
    "width": "200px",
    "height": "200px"
  });
  $("#num0").css({
    "background": "url(" + cc[0] + ")",
    "background-size": "cover"
  });
  $("#num1").css({
    "background": "url(" + cc[1] + ")",
    "background-size": "cover"
  });
  $("#num2").css({
    "background": "url(" + cc[2] + ")",
    "background-size": "cover"
  });
  $("#num3").css({
    "background": "url(" + cc[3] + ")",
    "background-size": "cover"
  });



  for (i = 0; i < cc.length - 1; i++) {
    $("#num" + i).hover(function() {
      $("#num" + i).css({
        "background": "url(" + zz[i] + ")",
        "background-size": "cover"
      });
    }, function() {
      $("#num" + i).css({
        "background": "url(" + cc[i] + ")",
        "background-size": "cover"
      });
    });

  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="num0">

</div>
<br>

<div id="num1">

</div>
<br>

<div id="num2">

</div>
<br>

<div id="num3">

</div>

чяднт?

jquery циклы hover
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

То, с чем вы боретесь - это захват переменных. i в вашем цикле - это не просто значение, это физически одна и та же переменная, значение которой в конце выполнения цикла равно 3 (поэтому и работает все только для последнего элемента, с некоторыми вариациями). Самый простой способ это обойти - забайндить переменную в теле цикла к другому, неизменяемому значению. Например, обернув тело цикла в функцию:

$(function() {
  var cc = []; // оригинальные изображения

  cc.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/aa7e4f0e04.png");
  cc.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/c2a816da12.png");
  cc.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/c1213e2066.png");
  cc.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/7cf250be32.png");

  var zz = []; // изображения, на которые заменяются блоки 

  zz.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/65dafb633b.png");
  zz.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/e57cce0bf9.png");
  zz.push("http://dl2.joxi.net/drive/0001/2747/88763/150504/58649144f9.png");
  zz.push("http://dl1.joxi.net/drive/0001/2747/88763/150504/ab42d361d8.png");

  $('div').css({
    "width": "200px",
    "height": "200px"
  });
  $("#num0").css({
    "background": "url(" + cc[0] + ")",
    "background-size": "cover"
  });
  $("#num1").css({
    "background": "url(" + cc[1] + ")",
    "background-size": "cover"
  });
  $("#num2").css({
    "background": "url(" + cc[2] + ")",
    "background-size": "cover"
  });
  $("#num3").css({
    "background": "url(" + cc[3] + ")",
    "background-size": "cover"
  });

  var setHoverFor = function(i)
  {
    return function() {
    $("#num" + i).hover(function() {
      $("#num" + i).css({
        "background": "url(" + zz[i] + ")",
        "background-size": "cover"
      });
    }, function() {
      $("#num" + i).css({
        "background": "url(" + cc[i] + ")",
        "background-size": "cover"
      });
    });
    };
  }
  
  for (i = 0; i < cc.length; i++) {
    setHoverFor(i)();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="num0">
</div>
<br>
<div id="num1">
</div>
<br>
<div id="num2">
</div>
<br>
<div id="num3">
</div>