jQuery顯示和隱藏圖片

Question

嗨，希望有人可以幫我解決這個問題，我希望將圖片懸停在它們上方時可以隱藏和顯示。...所有div都具有相同的類，並且切換后的圖片也具有相同的類，例如：

<div class="square"><img class = "imagesbw" src="images/image3bw.png"  alt="" width="91" height="76">
<img class = "imagescol" src="images/image3.png"  alt="" width="91" height="76">
</div>

<div class="square"><img class = "imagesbw" src="images/image3bw.png"  alt="" width="91" height="76">
<img class = "imagescol" src="images/image3.png"  alt="" width="91" height="76">
</div>

<div class="square"><img class = "imagesbw" src="images/image3bw.png"  alt="" width="91" height="76">
<img class = "imagescol" src="images/image3.png"  alt="" width="91" height="76">
</div>

<div class="square"><img class = "imagesbw" src="images/image3bw.png"  alt="" width="91" height="76">
<img class = "imagescol" src="images/image3.png"  alt="" width="91" height="76">
</div>

<div class="square"><img class = "imagesbw" src="images/image3bw.png"  alt="" width="91" height="76">
<img class = "imagescol" src="images/image3.png"  alt="" width="91" height="76">
</div>

所以在彩色圖片上方有一個黑白圖片..我想將鼠標懸停在其中一個上並將其隱藏起來以顯示后面的一個...

這是我在jQuery中所做的

$(document).ready(function() {   
  $(".imagesbw").mouseover(function(){
  $(".imagesbw").hide();



  })
    $(".imagescol").mouseout(function(){
  $(".imagesbw").show();
});
})

唯一的問題是它們有多個，並且它們都同時顯示和隱藏，而一個以上...我只希望鼠標懸停的那個可以隱藏和顯示，等等。

我是jQuery的新手，希望這有意義

這是我想在最新發布和偷偷摸摸的峰值下做的一個示例

謝謝

Answer 1

使用this上下文執行代碼。在事件處理程序中， this是指調用事件的元素。

$(document).ready(function() {   
    $(".imagesbw").mouseover(function(){
        $(this).hide();
    })
    $(".imagescol").mouseout(function(){
        //Here use the prev() method in conjection with this 
        $(this).prev(".imagesbw").show(); 
    });
})

Answer 2

您只需要使用this 。 在您的方法中，第一類將每次拾取，並this發生當前元素事件。 this是對調用當前函數的成員的引用

$(document).ready(function() {   
  $(".imagesbw").mouseover(function(){
  $(this).hide();



  })
    $(".imagescol").mouseout(function(){
  $(this).show();
});
})

Answer 3

您正在提供通用解決方案。 你應該特別使用this這種方式：

$(document).ready(function() {   
    $(".imagesbw").mouseover(function(){
        $(this).hide();
    })
    $(".imagescol").mouseout(function(){
        $(this).prev(".imagesbw").show();
    });
});

更新：甚至看到Satpal都給出了相同的答案！ :)

Answer 4

代碼更改：

$(document).ready(function() {
  // hide all bw images (you can also do this by css - display:none)
  $('.imagesbw').hide();

  // on mouseover event - hide current color image and show b&w image
  $(".imagescol").mouseover(function(){
     $(this).hide();
     $(this).prev().show();
  });

  // on mouseout event - hide current b&w image and show color image
  $(".imagesbw").mouseout(function(){
     $(this).hide();
     $(this).next().show();
  });
});

您的示例的JSFiddle 在這里

您也可以通過僅使用CSS來達到相同的效果

.imagescol:hover {
   -webkit-filter: grayscale(100%); 
   filter: grayscale(100%);
}

然后，您就不需要兩個不同的圖像（彩色和黑白），也不需要JavaScript。 JSFiddle在這里 。

Answer 5

您必須在這種情況下使用此

$(document).ready(function() {   
$(".imagesbw").mouseover(function(){
    $(this).hide();
})
$(".imagescol").mouseout(function(){
    $(this).parent().find(".imagesbw").show();
});

}）

http://plnkr.co/edit/1vDNHnaRKkAIfxhzSr3e?p=preview