0

我正在我们的网站上制作一个使用 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 框下方，但如果您立即单击另一个框，它会转到正确的位置。

谢谢您的帮助！

马特

4

1 回答 1

1

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

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

于 2013-05-28T17:25:20.533 回答