Question

我如何对以下代码进行排序，以便在前一行之后运行一行？

$('#jqNav li a').click(function(e){

    if($(this).parent().is(".nav1")){ $('.landing .main .nav ul').css({ "background-position" : "0 -50px" });} 
    else if($(this).parent().is(".nav2")) { $('.landing .main .nav ul').css({ "background-position" : "0 -100px" });}
    else if($(this).parent().is(".nav3")) { $('.landing .main .nav ul').css({ "background-position" : "0 -150px" });}
    else if($(this).parent().is(".nav4")) { $('.landing .main .nav ul').css({ "background-position" : "0 -200px" });};

    stopAnim = true;
    $page = $(this).attr('href');
    var $hashTag = $(this).attr('name');
    window.location.hash = $hashTag;
    loadData();
    $(window).scrollTop(0);
    e.preventDefault();

});

Answer 1

假设loadData()正在触发异步AJAX请求，那么问题只会是如何推迟最终结果：

$(window).scrollTop(0)

直到加载新内容之后。

处理该问题的最佳方法是loadData()返回AJAX请求的句柄，然后使用：

loadData().done(function() {
    $(window).scrollTop(0);
});

使用jQuery 1.5中引入的延迟对象语法

Answer 2

如果你想制作动画，你应该检查.queue（）。

http://api.jquery.com/queue/

根据我的理解，你试图在成功时按顺序设置这些？

        $('#jqNav li a').click(function (e) {
    if ($(this).parent().is(".nav1")) {
            $('.landing .main .nav ul').css({
                    "background-position": "0 -50px"
            });
    }
    else if ($(this).parent().is(".nav2")) {
            $('.landing .main .nav ul').css({
                    "background-position": "0 -100px"
            });
    }
    else if (
    $(this).parent().is(".nav3")) {
            $('.landing .main .nav ul').css({
                    "background-position": "0 -150px"
            });
    }
    else if ($(this).parent().is(".nav4")) {
            $('.landing .main .nav ul').css({
                    "background-position": "0 -200px"
            });
    };
    e.preventDefault();
    stopAnim = true;
    $page = $(this).attr('href');
    var $hashTag = $(this).attr('name');
    window.location.hash = $hashTag;
    $.ajax({
            url: $(this).attr('href'),
            success: function (e) {
                    $(window).scrollTop(0);
                    // Run your scripts to occur after ajax success in here
            },
            error: function (e) {
                    console.log('error occured');
            }
    });

}）;

Answer 3

我已经将loadData块中的ajax调用绑定到成功的方法。我编写并测试了（FF 5.0＆amp; IE 9）以下代码片段并调用了成功方法（您需要创建'test.html'文件）：

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script>
$(function()
{
    $('a').click(function()
    {
        loadData();
        return false;
    });

    function loadData()
    {
        $.ajax({
          url: "test.html",
          context: document.body,
          success: loadDataSuccess()
        });
    }

    function loadDataSuccess()
    {
        alert('success!');
        $(window).scrollTop(0);
    }
});
</script>
</head>
<body>
<a href="bla.html">Test</a>
</body>
</html>

我唯一注意到的是'e.preventDefault'不会阻止我关注链接，因此我将其更改为'return false'。

顺序jQuery代码

3 个答案: