jquery - mouseleave函数覆盖JQuery的click函数

Question

我的代码中的mouseleave函数覆盖了click函数。我想做的事:如果选择了一张图像(不透明度 1.0)，那么悬停功能应该仅适用于其他 2 个元素(不适用于选定的元素)。

这是我的html

<div id="hover"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;" /></div>

<div id="hover1"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;"/></div>

<div id="hover2"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;"/></div>

我的jquery

$("#hover").mouseover(function(){
        $("#hover").fadeTo(100, 1.0);
});

$("#hover").mouseleave(function(){
    $("#hover").fadeTo(100, 0.7);
});

$("#hover1").mouseover(function(){
    $("#hover1").fadeTo(100, 1.0);
});

$("#hover1").mouseleave(function(){
    $("#hover1").fadeTo(100, 0.7);
});

$("#hover2").mouseover(function(){
    $("#hover2").fadeTo(100, 1.0);
});

$("#hover2").mouseleave(function(){
    $("#hover2").fadeTo(100, 0.7);
});

$("#hover").click(function(){
        $("#hover").fadeTo(100, 1.0);
    $("#hover1").fadeTo(100, 0.7);
    $("#hover1").fadeTo(100, 0.7);
});

$("#hover1").click(function(){
    $("#hover1").fadeTo(100, 1.0);
    $("#hover").fadeTo(100, 0.7);
    $("#hover2").fadeTo(100, 0.7);
});

$("#hover2").click(function(){
    $("#hover2").fadeTo(100, 1.0);
    $("#hover").fadeTo(100, 0.7);
    $("#hover1").fadeTo(100, 0.7);
});

这是一个jsfiddle: my jsfiddle

我希望有人能帮助我。提前致谢!

Answer 1

我已经为您进行了一些代码重构。

<div class="hover-img"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;" />hover</div>
<div class="hover-img"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;"/>hover1</div>
<div class="hover-img"><img src="http://www.franz-sales-verlag.de/fsvwiki/uploads/Lexikon/Baum.jpg" width="100px;"/>hover2</div>

简单的代码:

//select all image containers
var hoverContainers = $('.hover-img');
//initial fade out
hoverContainers.css('opacity', 0.7);
//mouseover and mouseleave binding
hoverContainers.hover(
  //mouseover
  function(){    
    $(this).fadeTo(100, 1);
  },
  //mouseleave
  function(){
    //check if you image has 'selected' class
    if (!$(this).is('.selected'))
      //if no fade out
      $(this).fadeTo(100, 0.7);
  }
);
//add 'selected' class on click
hoverContainers.click(function(){
  //remove 'selected' class from previously selected image
  hoverContainers.filter('.selected').removeClass('selected').fadeTo(100, 0.7);
  //mark clicked image with 'selected' class
  $(this).addClass('selected');
});

jsfiddle带代码

致以诚挚的问候

编辑我忘记淡出之前选择的图像。

//add 'selected' class on click
hoverContainers.click(function(){
  //remove 'selected' class from previously selected image
  hoverContainers.filter('.selected').removeClass('selected').fadeTo(100, 0.7);
  //mark clicked image with 'selected' class
  $(this).addClass('selected');
});

以下代码将发挥神奇作用: hideContainers.filter('.selected').removeClass('selected').fadeTo(100, 0.7);

测试更新版本:http://jsfiddle.net/3QLC6/7/