addClass在Ajax加載之前

我試圖在jQuery中的瀏覽器中顯示它之前，將一個類添加到包含在加載了Ajax的頁面中的元素。這裏是我的代碼：addClass在Ajax加載之前

$("#landing li.nav4 a").live('click', function() { 
    $("#landing").fadeOut('slow', function(){ 
     $('#agency').load('assets/ajax/agency.html').fadeIn(function(){ 
      $("#agency-main nav li.nav1 a").addClass("nav1-on"); 
     }); 
    }); 
    return false; 
});

在此刻發生的是頁面加載，然後添加類和有一個明顯的「閃光」作爲類（背景圖像）被加載。

任何想法如何加載內容，添加類，然後按此順序淡入？

來源

2011-11-18 Yahreen

目前還不清楚''＃agency-main nav li.nav1 a「'（一個嚴重超限制的選擇器，順便說一下！）可用於文檔以添加其類。這是總是可用的，或者只能在'agency.html'中使用嗎？ –

僅在agency.html – Yahreen

內部可用因此'＃agency-main nav li.nav1 a'僅在*'agency.html'已加載後可用，但您希望'addClass（'nav1-on'）'到它*之前*'agency.html'被加載到'＃agency'中？ –

我是jquery noob，所以這更適合我自己的學習 - 爲什麼不呢？

//make sure #agency is defaulted to display:none, or add a line to check this 
$("#landing li.nav4 a").live('click', function() { 
    $('#agency').load('assets/ajax/agency.html', function() { 
    $("#agency-main nav li.nav1 a").addClass("nav1-on"); 
    }); 
    $("#landing").fadeOut('slow', function(){ 
    $('#agency').fadeIn(); 
    }); 
    return false; 
});

來源

2011-11-18 07:35:22 themerlinproject

'「＃agency-main nav li.nav1 a」'在agency.html中，因此agency.html必須先加載才能將類添加到它。 – Yahreen

@yahreen怎麼樣？（上面編輯） – themerlinproject

嘿。完全合作。謝謝。感謝大家。 – Yahreen

您可以嘗試創建要在後臺將該類關聯到的元素，然後在需要時插入該元素。

如..

el = $("#landing"); 
//fadeout el 
//remove from html 
//add class 
//insert it back in

如果你可以寫上的jsfiddle代碼，thta將是非常有益:)

來源

2011-11-18 07:02:21 satin

叫我nutbar，但我討厭破譯百萬回調時，所有你需要是事件的管理秩序：

$("#landing li.nav4 a").on('click', function(event) { 
    event.preventDefault(); // better than return false; 
    $agency = $('#agency'); // cache it since we use it twice 

    // fade out the landing div, and when that's done load agency.html into #agency 
    // presumably, #agency is already hidden 
    $("#landing").fadeOut('slow', function(){ 
    $agency.load('assets/ajax/agency.html'); 
    }); 

    // add the class to the nav item 
    $("#agency-main nav li.nav1 a").addClass("nav1-on"); 

    // fade #agency in 
    $agency.fadeIn(); 
});

通知2項其他改善建議，你可以採取或離開：

換掉.live（）for .on（），它可用於jQuery 1.7。如果您使用的是較舊的jQuery，則仍應考慮.delegate（）而不是.live（）
使用preventDefault（）可以將點擊事件從冒泡狀態停止爲默認狀態;這在檢查代碼時更高效並且更容易理解。

來源

2011-11-18 07:16:07

另外：有沒有可能這是過度工程，時期？ jQuery不是模塊化的（這是專門針對'nav4 a'的點擊，最終修改了'nav1 a'，這可能是預期的結果，但它不可重用！）。所以既然它非常具體，爲什麼不直接返回已經添加的類的agency.html呢？ –

是的，也許你是對的。我試圖避免從標籤管理一堆removeClass'es，但我必須這樣做。謝謝，所有。 – Yahreen

addClass在Ajax加載之前

回答

相關問題