Проблема с алгоритмом for

Question

Нужно что бы переменная i увеличивалась от 1 до 9,но в jQuery(".text-directions_"+i).addClass("hover-directions"); переменная i всегда равна 10,как исправить?

    for(i=1;i<=9;i++) {
    jQuery(".image-directions_"+i).mouseover(function() {
          jQuery(".text-directions_"+i).addClass("hover-directions");
          console.log(i);
    });
    jQuery(".image-directions_"+i).mouseout(function() {
         jQuery(".text-directions_"+i).removeClass("hover-directions");
         console.log(i);
    });
}

Answer 1

let должна решить проблему

for (let i=1;i<=9;i++) {
    jQuery(".image-directions_"+i).mouseover(function() {
          jQuery(".text-directions_"+i).addClass("hover-directions");
          console.log(i);
    });
jQuery(".image-directions_"+i).mouseout(function() {
    jQuery(".text-directions_"+i).removeClass("hover-directions");
    console.log(i);
});

}

.hover-directions {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="image-directions_1">
  <div class="text-directions_1">
  1
  </div>
</div>

<div class="image-directions_2">
  <div class="text-directions_2">
  2
  </div>
</div>

<div class="image-directions_3">
  <div class="text-directions_3">
  3
  </div>
</div>

---

Но лучше так:

jQuery(".test1").mouseover(function() {
  $(this).find(".test2").addClass("hover-directions");
});
jQuery(".test1").mouseout(function() {
  $(this).find(".test2").removeClass("hover-directions");
});

.hover-directions {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="image-directions_1 test1">
  <div class="text-directions_1 test2">
    1
  </div>
</div>

<div class="image-directions_2 test1">
  <div class="text-directions_2 test2">
    2
  </div>
</div>

<div class="image-directions_3 test1">
  <div class="text-directions_3 test2">
    3
  </div>
</div>

Потому что зачем вам тысяча классов, если можно обойтись одним?