Question

我希望最好使用jquery或javascript来覆盖每个图像底部变量的文本。

这是我正在进行的项目 - http://codepen.io/chrismcintosh/pen/ejzut。

这是我制作的第一个javascript，所以对我不要太难。

有人能指出我正确的方向吗？

Answer 1

问题在于细节，但希望这会有所帮助。首先，您需要添加一个将数据保存到HTML的元素。你可以通过JS而不是通过HTML来做到这一点，如果你愿意，但是这里是：

<img src="http://greatworkperks.com/sites/default/files/perks/RunorDye2.jpg" 
class="tile" id="Run Or Dye" data-toggle="modal" data-target="#myModal"
onclick="myFunction(this.id)">
<!-- Below is the new div -->
<div id="RunOrDye_Overlay" class="overlay">Run or Dye</div>

接下来，添加相应的CSS样式。这是一个可能有效的方法：

DIV.overlay{
  position: relative;
  display: inline;
  top: 110px;
  left: -290px;
  background-color: #333333;
  color: white;
}

此时您的叠加层已存在。我不确定你是否需要你的JS在这一点上做任何事情 - 当用户将鼠标悬停在图像上或类似的东西时，你可以设置你的JS来切换这个div。

这有帮助吗？

Answer 2

您可以使用jQuery的.wrap()函数来包装每个磁贴，而不是将叠加层硬编码到html中，然后将文本元素附加到每个包装器。

// wrap each tile in a span
$('.tile').wrap('<span class="tile-wrapper"></span>')

// append the text to each wrapper
$('.tile-wrapper').each(function(){
  var $this = $(this);
  $this.append('<div class="image-text">' + $this.find('img').attr('id') + '</div>');
});

如果您创建每个包装器元素position: relative并且每个文本覆盖position: absolute，则叠加层将自动定位在每个图块的中间。然后，您可以调整叠加层bottom属性，将它们放在图块的底部。

此处有更新的 CodePen

从每个图像底部的变量叠加文本

2 个答案: