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加载之前

回答

相关问题