克隆-對多個元素使用相同的javascript和CSS

Question

首先，我有一張圖片和一個標題：

<!-- HTML code -->
<img class="gthumb" src="http://i.imgur.com/V9vL6kg.png" width="175"><div class="title">Grand Theft Auto IV<br/>俠盜獵車手IV</div>

其次，我默認隱藏標題：

// CSS code
.title { display: none; position: absolute; }

第三，我將鼠標懸停在圖像上時使用jQuery顯示標題：

// JS code
$("img.gthumb").hover (function () {
      $("div.title").show();
    }, function () {
      $("div.title").hide();
});
$("img.gthumb").mousemove(function(e) {
      var width = $('div.title').width();
      var height = $('div.title').height();
      $("div.title").css("top",e.pageY - height - 5);
      $("div.title").css("left",e.pageX - width / 2);
});

然后，我克隆HTML code以顯示另一組圖像和標題，原始標題和克隆的標題彼此重疊。

我不能使用this或$(this)因為$("img.gthumb")作用類似於事件監聽器。

逐個克隆和更改類名不是一個好的解決方案，如何將相同的javascript和css用於多個元素（在這種情況下為圖像和標題）？ 非常感謝。

jsfiddle： http : //jsfiddle.net/ap94pt9q/1/

Answer 1

您可以使用此：

$(this).next("div.title")

選擇正確的title -請參見下面的演示：

 $("img.gthumb").hover(function() { $(this).next("div.title").show(); }, function() { $(this).next("div.title").hide(); }); $("img.gthumb").mousemove(function(e) { var width = $(this).next('div.title').width(); var height = $(this).next('div.title').height(); $(this).next("div.title").css("top", e.pageY - height - 5); $(this).next("div.title").css("left", e.pageX - width / 2); }); 

 .title { position: absolute; text-align: center; vertical-align: middle; width: auto; height: auto; display: none; color: white; font-size: large; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <br/> <br/> <br/> <table align="center" border="1" style="overflow:hidden;max-height:177px;"> <tr> <td> <img class="gthumb" src="http://i.imgur.com/V9vL6kg.png" width="175"> <div class="title">Grand Theft Auto IV <br/>俠盜獵車手IV</div> </td> <td> <img class="gthumb" src="http://i.imgur.com/V9vL6kg.png" width="175"> <div class="title">GTA IV <br/>to be added</div> </td> </tr> </table> 

Answer 2

http://jsfiddle.net/pm491057/2/

盡管我使用native選擇div，但您到了。 無法JQuery for Shiez

$("img.gthumb").hover(function() {
  var titleDiv = this.parentNode.getElementsByClassName('title')[0];
  $(titleDiv).show();
}, function() {
  var titleDiv = this.parentNode.getElementsByClassName('title')[0];
  $(titleDiv).hide();
});
$("img.gthumb").mousemove(function(e) {
  var titleDiv = this.parentNode.getElementsByClassName('title')[0];
  var width = $(titleDiv).width();
  var height = $(titleDiv).height();
  $(titleDiv).css("top", e.pageY - height - 5);
  $(titleDiv).css("left", e.pageX - width / 2);
});

Answer 3

理想情況下，您想要創建同時包含圖像和標題的可懸停元素：

<div class="gthumb"><img src="http://i.imgur.com/V9vL6kg.png" width="175"><h2 class="title">Grand Theft Auto IV<br/>俠盜獵車手IV</h2></div>

然后，在您的.hover語句中，您可以在元素中找到標題。 現在，使用$("div.title").show()將同時顯示所有.title元素，而不僅僅是您想要的元素。 因此，如下所示：

$(".gthumb").hover(function () {
  $(this).find(".title").show();
}, function () {
  $(this).find(".title").hide();
});

您需要以類似的方式更新mousemove函數中的選擇器。