1

私のコードの mouseleave 関数はクリック関数を上書きします。私がしたいこと:画像が選択されている場合(不透明度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があります： 私のjsfiddle

誰かが私を助けてくれることを願っています。前もって感謝します！

4

2 に答える 2

2

私はあなたのためにいくつかのコードリファクタリングを行いました。

<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');
});

次のコードは魔法を実行します：hoverContainers.filter（'。selected'）。removeClass（'selected'）。fadeTo（100、0.7）;

更新されたバージョンのテスト：http：//jsfiddle.net/3QLC6/7/

于 2013-01-11T12:06:44.920 に答える
1

これを参照してくださいhttp://jsfiddle.net/3QLC6/5/

$("#hover1,#hover2").fadeTo(100, 0.7);

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

$("#hover,#hover1,#hover2").mouseleave(function () {
  if (!$(this).hasClass('selected')) {$(this).fadeTo(100, 0.7)};
});

$("#hover,#hover1,#hover2").click(function () {
  $(this).addClass('selected').fadeTo(100, 1.0).siblings('.selected').removeClass('selected').fadeTo(100, 0.7);
});

クラスの使用法に関する更新も参照してください: http://jsfiddle.net/3QLC6/6/

于 2013-01-11T12:18:08.627 に答える