Question

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

.triangle { margin-left: 25px; }

在给定行中保存图像的每个容器都包含一个类，用于标识它所在的列：1到6。我使用此列类来设置左边距应该是多远：

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。工作良好。重新加载页面并首先单击Bechtel框。三角形显示在ALDI框下方，但如果您立即单击另一个框，则会转到正确的位置。

感谢您的帮助！

马特

Answer 1

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

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

三角指示器问题

1 个答案: