三角指示器问题

Question

我在我们的网站上制作了一个使用Google图片样式展开框的页面。我试图在扩展的<div>上放置一个指示器，以便用户知道他们当前正在查看哪些信息。它几乎完美地工作。唯一的问题是，如果你点击一个框，是不是在页面加载后的第一个正确的，三角形熄灭的为它定义的CSS规则：

.triangle { margin-left: 25px; }

每个保存的图像容器一个给定的行包含一个类来标识它是哪一列是：从一到六。我使用此列类来设置左边距应该有多远：

function getMarginLeft(obj) { 
    if(obj.hasClass('first')) { 
     x = '25px'; 
    } 
    ... 
    else if (obj.hasClass('sixth')) { 
     x = '605px'; 
    } 

    return x; 
} 

$('.superbox-list').click(function() { 
    var ml = getMarginLeft($(this)); 
    $(".triangle").css('margin-left',ml); 
} 

我不确定为什么这会首先被忽略。查看：http://wwwdev.cco.purdue.edu/about/ncp.shtml

例如：在页面加载后单击ALDI框。三角形显示正确。点击柏克德。工作正常。重新加载页面并首先点击Bechtel框。该三角形出现在ALDI框下方，但如果您立即点击另一个框，它将转到正确的位置。

感谢您的帮助！

马特

Answer 1

的问题是，三角形没有被插入到文档中还没有，所以第一次$(".triangle").css('margin-left', ml)运行时，它适用于什么。

因此，您可以将该行移动到插入后（第93行，superbox.insertAfter(this)...），或者也可以将行改为triangle.css('margin-left', ml)，指的是变量。