克隆-对多个元素使用相同的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 (在本例中是图像和标题)？非常感谢。

小提琴手：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/

给您，虽然我使用本机来选择div。不能用JQuery来代替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函数中的选择器。