Question

我有以下代码，非常好，在悬停时将我的图像名称从image_off.jpg更改为image_on.jpg。我正在将它用于画廊。

    $(function(){
     $(".img-swap").hover(
          function(){this.src = this.src.replace("_off","_on");},
          function(){this.src = this.src.replace("_on","_off");
     });
});

但是，当我单击其中一个图像时，我希望图像名称保留在image_on.jpg上。这是可能的吗？当我点击另一个时，是否可以让它重新关闭？

由于

Answer 1

希望这有帮助

它可以正常工作，你可以悬停和关闭，当你点击img它将被选中并将留在那里，悬停影响将无法正常工作

当您点击下一个img时，所有其他选中的内容都将被移除，并且悬停影响将在该

上运行

编辑**更改了代码立即试用

$(function(){
    $(".img-swap").hover(
    function(){
        if(!$(this).hasClass("selected")) {
            this.src = this.src.replace("_off","_on");
        }
    },
    function(){

        if(!$(this).hasClass("selected")) {
            this.src = this.src.replace("_on","_off");
        }

    }).click(function(){
        $('.img-swap').removeClass('selected').attr('src',this.src.replace("_on","_off"));;
        this.src = this.src.replace("_off","_on");
        $(this).addClass("selected").attr('src',this.src.replace("_off","_on"));
    });
});

Answer 2

您可以使用切换而不是悬停：

 $(".img-swap").toggle(
      function(){this.src = this.src.replace("_off","_on");},
      function(){this.src = this.src.replace("_on","_off");
 });

编辑：在点击时固定图像（防止它再次变回关闭状态），你可以这样做：

$(".img-swap").hover(
      function(){this.src = this.src.replace("_off","_on");},
      function(){if (!pinned) this.src = this.src.replace("_on","_off");
 }).click(){
      $(this).data('pinned': !($(this).data('pinned')||false));
 });

Answer 3

这里有一些（未经测试的）代码：

 $(function(){
     $(".img-swap").hover(
      function(){
          this.src = this.src.replace("_off","_on");
      },
      function(){
          if(!this.hasClass("selected")) {
            this.src = this.src.replace("_on","_off");
          }
     }).click(function() {
         $(".img-swap.selected").removeClass("selected");
         this.addClass("selected");
     });
 });

它正在做的是为每个点击的元素添加.selected类。悬停功能会检查此类，并且仅在未选择图像时才进行替换。

Answer 4

如果可以

，只需为课程添加css悬停事件即可

.img-swap：悬停{src：image_on.jpg}

jquery悬停代码上的活动状态

4 个答案: