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

Question

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

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

每个图像都有一个通过php添加的唯一ID。 因此，我使用下面的代码来获取已悬停的特定图像ID，然后显示其框（默认为显示：隐藏）。 这是行不通的。 我猜我没有使用正确的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找到第一个匹配元素时，它将停止遍历DOM。 尝试以不同的方式命名它们，例如使用前缀，或者将元素结构更改为仅使用类。