jQuery меняет изображение при наведении, затем сохраняет изображение при нажатии - PullRequest
Новая
       21

jQuery меняет изображение при наведении, затем сохраняет изображение при нажатии

1 голос
/ 12 сентября 2011

У меня небольшая проблема с jQuery и изображением.

Я пытаюсь создать простую систему, в которой изображение меняется при наведении курсора (что я успешно сделал с помощью jQuery.hover ()) однако сейчас я пытаюсь настроить его так, чтобы, если пользователь нажимает на изображение, источник постоянно меняется на изображение при наведении.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю,источник меняется, но когда я выключаю его, изображение снова меняется на «выключено»!Такая простая проблема, но я не могу найти решение.

Код наведения: 

$("#image").hover(function () {
            $(this).attr("src", getImageSourceOn("image"));
        }, function () {
            $(this).attr("src", getImageSourceOff("image"));
});

Функции getImageSourceOn / Off просто возвращают строку, основанную на параметре с новым источником.

Код onClick: 

var imageSource = $(imageID).attr("src");
  var onOff = imageSource.substring((imageSource.length - 5), (imageSource.length - 4));
  if (onOff == "F")
  {
    //alert("Off\nstrID = " + strID);
    $(imageID).attr("src", getImageSourceOn(strID));
  }
  else
  {
    //alert("On");
    $(imageID).attr("src", getImageSourceOff(strID));
  }

Этот код просто берет источник и ищет в источнике значение On / Off, чтобы поместить противоположное изображение.Я попытался использовать .toggle () вместо этого метода подстроки, но не смог заставить его работать.

1 Ответ

2 голосов
/ 12 сентября 2011

Объявление глобальной переменной. Прикрепите функцию к событию click: 

var clicked = false;

$("#image").click(function(){
  if(!clicked)
    clicked = true;
  else
    $(this).attr("src", getImageSourceOff("image"));
});

Затем измените ваш hover код 

  $("#image").hover(function () {
      $(this).attr("src", getImageSourceOn("image"));
  }, function () {
     if(!clicked)
       $(this).attr("src", getImageSourceOff("image"));
  });
...