упрощение длинного списка функций щелчка

Question

Я использую слайдер изображения на моем сайте: http://arirang.hr/cocohouse/accommodation/CHfood_en.html. Это хорошо работает для меня.

Когда посетитель нажимает миниатюру под ползунком, он переходит к конкретному изображению. Это делается с помощью функции щелчка для каждого миниатюры. Началось только с несколькими эскизами. Сейчас довольно много. Закончился длинный список функций щелчка.

Угадайте, что правильный путь должен быть через какую-то петлю. Когда посетитель нажимает на любую миниатюру, чтобы запустить цикл, который находит, на который щелкнут, и вызовите цикл с нажатым номером.

Answer 1

Прежде всего, вы должны представить какое-то усилие того, что вы сделали до сих пор. Это не сайт, на котором вы можете заказать решения.

Для устранения проблемы у вас должна быть одна функция, которая принимает имя изображения или какой-то идентификатор в качестве аргумента. Таким образом, вы используете только одну функцию для каждого изображения.

Answer 2

Изменить все ваши изображения, чтобы использовать класс вместо идентификаторов, таких как:

<input type="image" class="goTo" src="../images/cocohouse/accommodation/thumbnails/tn_CHfood_29.png" width="80" height="60"> 

Затем, сделайте следующее:

$('.goTo').click(function(event) { 
    event.preventDefault(); // you dont need this line for your code, see comment below for explanation 
    var cur = $('.goTo').index($(this)); 
    $('#acc_sl').cycle(cur); 
});