三角指示器問題

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)，指的是變量。