Question

我对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（）而不是这个子串方法，但我无法让它工作。

Answer 1

声明一个全局变量。在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"));
  });

jQuery在悬停时更改图像，然后在点击时保持图像

1 个答案: