JQuery hover, карта изображений, циклы и массивы

Question

Я хочу использовать метод наведения jQuery для опрокидывания над картой изображения базовой области, которая включает в себя множество нечетных фигур, так что при наведении на каждую точную форму запускается обмен изображения, а также обмен .innerhtml в отдельном текстовом блоке. Я начал с заполнителя «нулевого» изображения, которое полностью прозрачно, затем переключился на png над областью карты живого изображения при наведении курсора, а затем обратно на нулевое изображение при развертывании.

Итак, код для одной зоны карты местности выглядит примерно так, как показано ниже. Здесь areamapImage1 соответствует координатной зоне базового изображения.

$('#areamapImage1').hover(
    function() {
        $('#imageSwap').attr('src','images/image1.png');
    },
    function() {
        $('#imageSwap').attr('src','images/image0.png');
});

Это работает как талисман, если я явно объявляю каждую функцию наведения. Для 20 изображений это генерирует тонну ненужного кода; очевидно, это кричит о массивах и цикле. Итак ... должно быть просто заполнить два массива: один для областей карты изображений и один для изображений подкачки. Логирование консоли после цикла дает мне то, что я ожидаю, но функция наведения не работает. Поскольку я никогда ничего не делал в JS, я сильно подозреваю, что здесь есть ошибка оператора, связанная с умопомрачением, либо из-за синтаксиса JS / jQuery, либо из области действия. Насколько я могу судить, переменные должны быть доступны для функции наведения (?). Оба массива возвращают строки. jQuery имеет синтаксис, который помещает селекторы в одинарные кавычки; Когда я попытался настроить массив imageArea для явного включения кавычек, при наведении курсора возникла странная синтаксическая ошибка, поэтому я предполагаю, что jQuery просто использует обычные строки.

Спасибо за любые предложения!

$(document).ready(function() {

    // image preload
    var imageSource = []; 
    imageSource[0] = 'images/image0.png'  //load 0 position with "empty" png
    var imageAreas = [];

    // area map and image array fill
    for (var i=1; i<21; i++) {
        imageSource[i] = 'images/image' + i + '.png'; // 
        imageAreas[i] = '#areamap_Image' + i;

    $(imageAreas[i]).hover(   // hover function

        function() {
            $('#imageSwap').attr('src',imageSource[i]); 
        },
        function() {
            $('#imageSwap').attr('src','images/image0.png');
    });

};

});

Answer 1

Как уже сообщалось, ваш hover-вызов не входит в цикл for, поэтому он работает только для i = 21.

РЕДАКТИРОВАТЬ: Я собираюсь расширить это и фактически предложить другой метод: сначала переберите все ваши карты местности и добавьте к ним некоторую информацию, используя вызов data в jQuery. Таким образом, вы можете назначить одну и ту же функцию наведения на все ваши карты местности.

Пример:

$(document).ready(function() {
  for(var i = 1; i < 21; i++) {
    $('#areamap_Image' + i).data('rolloverImage', 'images/image' + i + '.png');
  }

  // Replace 'area' with a more specific selector if necessary
  $('area').hover(
    function() {
      $('#imageSwap').attr('src', $(this).data('rolloverImage'));
    },
    function() {
      $('#imageSwap').attr('src', 'images/image0.png');
    }
  );
});