整数在jQuery.fadeOut()函数内部偏斜?

时间:2011-08-08 18:43:54

标签: javascript jquery html

我正在尝试运行一个简单的post调用来检查更新,如果有,则更新特定元素。 我的问题是在fadeOut函数内部(实现允许平滑的fadeOutfadeIn),我的变量i(用作计数)增加1而不执行它我。 我尝试重命名变量来计算,但发生了相同的行为。我无法看到这种情况发生在哪里,或者为什么会发生这种情况,甚至在console.log函数之外的变量fadeOut也没有透露任何内容。

任何人对于发生了什么都有任何想法?

我的代码如下。

使用Javascript:

$.post(BaseUrl + $(this).val(), function (data) {
    var i = 0;
    $(element).parent().children(".MenuLink").each(function(index, e) {
        if ($(this).text() != data[i]['Value']) {
            $(this).fadeOut(function() {
                $(this).html('<a href="' + data[i]['Key'] + '"class="psuedolink personlink">' + data[i]['Value'] + "</a>");
                $(this).fadeIn();
            });
        }
        i++;
    });
});

HTML:

<div id="ActorMenu" class="Menu LastMenuItem">
    <div id="ActorLabel" class="Label">Actor</div>
    <div id="ActorDropdown" class="Dropdown">
        <input id="ActorSearch" type="text" />
        <hr />
        <a class="MenuLink FirstDropdownItem" href="/Network/reveal_network_7777/Behavior/Summary/Actor/actor_id_0">actor_0</a>
        <a class="MenuLink" href="/Network/reveal_network_7777/Behavior/Summary/Actor/actor_id_1">actor_1</a>
        <a class="MenuLink" href="/Network/reveal_network_7777/Behavior/Summary/Actor/actor_id_2">actor_2</a>
        <a class="MenuLink" href="/Network/reveal_network_7777/Behavior/Summary/Actor/actor_id_3">actor_3</a>
        <a class="MenuLink" href="/Network/reveal_network_7777/Behavior/Summary/Actor/actor_id_4">actor_4</a>
    </div>
</div>

1 个答案:

答案 0 :(得分:2)

这种情况正在发生,因为当执行每个循环时,i的值已经递增,并且当执行fadeOut回调时,i的值已经改变。试试这个

$.post(BaseUrl + $(this).val(), function (data) {
    var i = 0;
    $(element).parent().children(".MenuLink").each(function(index, e) {
        if ($(this).text() != data[i]['Value']) {
            $(this).data("i", i).fadeOut(function() {
                var count = $(this).data("i");
                $(this).html('<a href="' + data[count]['Key'] + '"class="psuedolink personlink">' + data[count]['Value'] + "</a>").fadeIn();
            });
        }
        i++;
    });
});