передача параметров в функцию

Question

Я очень новичок в javascript, и я надеюсь получить некоторую помощь по упрощению кода.

У меня есть два поля div, которые содержат 3 изображения каждое.В каждом блоке div отображается изображение по умолчанию (№ 1 и 4), и при наведении курсора мыши изменяется изображение (независимо).См. http://jsfiddle.net/hdaq9se5/6/.

Следующий код работает правильно, но я надеюсь получить некоторую помощь в упрощении кода, например, изменить функцию animation так, чтобы она принимала class поля div каквход.

$(document).ready(function () {
    $("#image_two, #image_three, #image_five, #image_six").hide();
    $(".image_rollover").hover(function () {
       animation()
    });

     $(".image_rollover2").hover(function () {
       animation2()
    });
});

function animation() {
    var $curr=$(".image_rollover img:visible");
    var $next=$curr.next();    

    if($next.size()==0) $next=$(".image_rollover img:first");

    $next.show();
    $curr.hide();
}

function animation2() {
    var $curr=$(".image_rollover2 img:visible");
    var $next=$curr.next();    

    if($next.size()==0) $next=$(".image_rollover2 img:first");

    $next.show();
    $curr.hide();
}

Answer 1

Как это?

Используя jquery, this в большинстве мест (почти везде) является текущим элементом.Как и Элемент, отправивший событие, ...

зная это, вам не нужно передавать какие-либо классы в animation, jquery уже предоставляет вам все, что вам нужно.

$(document).ready(function() {
  $(".image_box img").not(":first-child").hide();
  $(".image_box").hover(animation);
});

function animation() {
  var $curr = $("img:visible", this);
  var $next = $curr.next();

  if ($next.length === 0) {
    $next = $("img:first", this);
  }

  $next.show();
  $curr.hide();
}

.image_box {
  border: 1px solid #000000;
  width: 130px;
  height: 80px;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="image_rollover image_box">
  <img id="image_one" src="http://placehold.it/130x80&text=1">
  <img id="image_two" src="http://placehold.it/130x80&text=2">
  <img id="image_three" src="http://placehold.it/130x80&text=3">
</div>

<div class="image_rollover2 image_box">
  <img id="image_four" src="http://placehold.it/130x80&text=4">
  <img id="image_five" src="http://placehold.it/130x80&text=5">
  <img id="image_six" src="http://placehold.it/130x80&text=6">
</div>