Уплотнение повторяющегося кода JQuery

Question

У меня есть страница с большим изображением с несколькими миниатюрами.Когда вы наводите указатель мыши на миниатюру, основное изображение меняется на изображение, на которое вы только что навели курсор мыши.Проблема в том, что чем больше у меня эскизов, тем больше у меня повторяющегося кода.Как мне его уменьшить?

Код JQuery выглядит следующим образом.

родовое слово

#big_img= идентификатор полноразмерного изображения

#thumb1, #thumb2, #thumb3, #thumb4= идентификаторы миниатюр

Основной код страницы - PHP, если это помогает.

Answer 1

Прежде всего, вам следует изменить свой код так, чтобы на каждом эскизе был легко найти «класс».

Если у вас есть

родовое слово

ваш HTML должен выглядеть как

родовое слово

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

родовое слово

В какой организации хранятся ваши файлы?

Давайте представим, что эскизы имеют тот же src, что и изображения ошибок

Код jQuery будет уменьшен до:

родовое слово

Этот код должен работать и просто ожидает алгоритма, который преобразует src большого пальца в src большого изображения

Надеюсь, это поможет вам Джером Вагнер

Answer 2

$(this) - ваш друг.Вам также необходимо разработать некую номенклатуру, которую вы можете использовать для сопоставления имен ваших файлов и идентификаторов.Обычно я использую PHP для генерации HTML, но добавляю специальные атрибуты, обрабатывающие имена файлов:

родовое слово

Затем я перейду к следующему шагу:

родовое слово

Метод Fehays определенно работает, но в этом случае у вас не будет тонны ненужных идентификаторов, и вам не придется выполнять ненужную передачу параметров.Он будет автоматически распространяться на каждый экземпляр в DOM с классом thumb.

Answer 3

Думаю, вы могли бы просто написать функцию.

родовое слово

Answer 4

Я думаю, что самое чистое, что вы могли бы сделать, - это расширить jQuery, включив в него нужную вам функциональность:

родовое слово

Вы можете проверить это здесь! http://jsfiddle.net/jPYyZ/

====== Обновить=======

Если вы хотите создать систему эскизов / предварительного просмотра при наведении указателя мыши, это все, что нужно:

родовое слово

Вы можете протестировать / повозиться с этим здесь: http://jsfiddle.net/AhwH7/