jquery - jQuery在悬停时显示图像，检测元素ID的某些部分

Question

<a>我想在和</a>标签之间的链接悬停上创建一个图像预览。这是我的代码：

<li id="pic39">
    <span class="pr2"></span>
    <a id="pic39" href="http://shrani.slo-devs.com/index.php?p=6vxK53pk" target="_blank">Sandra</a>
    <span class="edit" onclick="location.href='index.php?e=39'"></span>
    <span class="delete" onclick="deletePIC(39)"></span>
    <i class="infoSlike">(0 ogledov | 11.03.2013 / 21:59:31)</i>
    <div id="imgPrv">
        <span id="imgPrv39">
            <img src="http://www.shrani.slo-devs.com/upl/CENSURE.jpeg" />
        </span>
    </div>
</li>

我希望 jQuery 检测标签 ID 的其余部分（因此，数字39）并显示包含数字39的跨度（ID为 imgPrv39的跨度）。

Answer 1

$('li a').hover(function(){
   // You can replace the `pic` with an empty string
   var id = this.id.replace('pic', '');
   $('#imgPrv' + id).toggle();
})

请注意，ID 必须是唯一的，您有多个具有相同 ID 的元素，您的标记无效，您应该改用类。

您还可以使用siblings方法：

$('li a').hover(function(){
   $(this).siblings('div').find('span').toggle();
})

Answer 2

你不需要这样做。您可以使用相对选择器并消除所有这些 ID 业务。

这假设您的 LI 中只有一个 A 和一个 SPAN。如果您想更具体，可以使用类名。

$("li a").hover(
  function () {
    $(this).find('span').show();
  },
  function () {
     $(this).find('span').hide();
  }
);