Question

我正在创建一个类似于Instagram的图片库或Facebook中的用户照片。

我希望能够允许用户查看每个图像的详细信息（例如日期），当用户将鼠标悬停在图像上时，显示在图像上方显示的框中。

每张图片都有一个通过php添加的唯一ID。因此，我使用下面的代码来获取已悬停的特定图像ID，然后显示其框（默认情况下显示为：hidden）。这不起作用。我想我没有使用正确的jQuery选择器。

$('.itemImgBox').hover(function(){

   var elementId = this.id;

    $("#"+elementId+".detailsBox").show();
});

更新：

HTML

        <div class="col-md-4">
            <table>
                <tr>
                    <td style="text-align:center" id="<?php echo $item_id; ?>" class="itemImgBox">
            <img src="..link.../<?php echo $item_name ?>" style="height: 200px; width:200px;" /> 
            <br/>

                    </td>

                </tr>
                <tr>
                    <td style="font-weight: bold; padding-top: 5px; letter-spacing: 1px; font-size: 10pt;">
                        <?php  echo strtoupper($item_name); ?>
                    </td>
                </tr>

                <tr style="">
                    <td  style="padding-top: 5px; padding-bottom: 3px;" id="<?php echo $item_id; ?>">
                        <?php  echo $image_description; ?>
                        <a href="somephp.php?itemId=<?php echo $item_id; ?>" class="detailsBox">
                <img src="..imagelink.." title="lala" />
            </a>                             
                    </td>
                </tr>
                <tr style="">
                    <td>
                        <?php  echo $item_info; ?>
                    </td>
                </tr>   

            </table>
            <br/>

        </div>

Answer 1

第一个字符不能是元素ID中的数字。

做这样的事情。

id="image_<?php echo $item_id; ?>"

在你的javacript中，只需$('#image_'+id).

Answer 2

由于DOM元素结构无效，您的第二个选择器似乎无效。只需您就不能拥有2个（或更多）ID相同的元素 - 它应该是唯一的。当jQuery通过ID找到第一个匹配元素时，jQuery停止遍历DOM。尝试以不同的方式命名它们，例如使用前缀，或者更改元素结构以仅使用类。

jQuery从提取的项目列表中选择一个元素

2 个答案: