使用jquery计算坐标时出现问题

您好，我正在尝试使用jquery在图片中居中放置箭头。。。箭头将用于导航我的图片。我的问题是我不能使箭头居中

这是我的密码：

我用类名更改了id，但仍然不起作用。我会将js css和html链接到您

html/php

    <div id="large" class="loader">
           <div id="test5"> 
            <img src="<?php bloginfo("template_url"); ?>/images/right.gif" class="right" width="38" height="48" alt="right"/>
            <img src="<?php bloginfo("template_url"); ?>/images/left.gif" width="38" height="48" class="left" />  
            <center><img src="<?php echo catch_that_image() ?>" class="photo_large"/><center>
        </div>
    </div>

js

注意：您使用的是

$（“#右”）.each（）

理论上，一个id应该只在一个元素上，因此运行

$（“#right”）.each（）不应该真的做任何事情。如果您对多个元素使用相同的ID，我建议您使用类。
photo大是一个#的孩子吗？如果是这样的话，您可能会遇到的问题是jQuery试图操纵页面上的每一张大照片

$(function() {

$("#right").each(function() {

    var h = $(this).children("#photo_large").height();

    var hr = $(this).height();

    $(this).css("top", ((h - hr)/2 + "px"));

});


});

但同意斯威茨的观点；对重复的对象使用类，对布局中每页只放置一次的对象使用ID。
我认为您需要多一点CSS。查看我的现场演示：

JS

$(document).ready(function() {
    $("#right").css("top", ($("#photo_large").height()/2) - ($("#right").height()/2));
    $("#right").css("left", ($("#photo_large").width()/2) - ($("#right").width()/2));    
});

#photo_large{
    z-index:998;
}
#right{
    z-index:999;
    position:absolute;
}

HTML

<img src="http://dummyimage.com/300x300/ffc/000&text=Picture1" id="photo_large">
<img src="http://dummyimage.com/30x30/f00/fff&text=>" id="right">

注意：您使用的是
$（“#右”）.each（）
理论上，一个id应该只在一个元素上，所以运行
$（“#right”）。每个（）
实际上不应该做任何事情。如果您对多个元素使用相同的ID，我建议您使用类。它在firefox中有效，但在safarie中无效。我也注意到，当图像高度变化时，箭头不在图像中间。它与第一个图像的高度保持固定。对不起，我是法国人！
$(document).ready(function() {
    $("#right").css("top", ($("#photo_large").height()/2) - ($("#right").height()/2));
    $("#right").css("left", ($("#photo_large").width()/2) - ($("#right").width()/2));    
});

<img src="http://dummyimage.com/300x300/ffc/000&text=Picture1" id="photo_large">
<img src="http://dummyimage.com/30x30/f00/fff&text=>" id="right">

#photo_large{
    z-index:998;
}
#right{
    z-index:999;
    position:absolute;
}