1

我的问题是，当我导航（单击）时，计数器（a）会增加 4 而不是 1（我想也许是由于 body+html 选择器）。所以，我想知道什么会解决这个问题，我可以在增量后减去 3 还是某个模数会有所帮助？

$('body,html').click(function () {
    $('body,html').animate({
        scrollTop: $(test[a]).offset().top
    }, {
        duration: 100,
        queue: false,
        complete: function () {
            // updating a bunch of elements here
            $(somearr[a]).css({
                "background-color":"#fff", 
                "border":"5px solid #ff6600", 
                "margin-left":"-5px"
            });

            a++; // CALLED 4 TIMES!
            console.log(a);
            if (a === 7) {
                a = 0;
                $(filler_six).hide();
                $(filler).show();
            }
            clearDiv();
        }
    }); //end of animation
}); //end of click function
// Clearing The Div's
4

3 回答 3

0

您绑定在 body 和 html 上，因此事件会触发两次。（一个用于 body，on 用于 html）。注意多重绑定。

于 2013-05-24T09:02:03.440 回答
0

您可以像这样使用一次性代理：

function oneTimeProxy(fn, ctx)
{
  var called = false;

  ctx = ctx || window;

  return function() {
    if (called === false) {
        called = true;
        return fn.apply(ctx, arguments);
    }
  }
}

然后使用它：

$('body,html').animate({
        scrollTop: $(test[a]).offset().top
    }, {
        duration: 100,
        queue: false,
        complete: oneTimeProxy(function () {
            // your code
        })
    }
);

至于额外的增量，你需要修改点击处理程序：

$('body,html').click(function (e) {
    e.stopPropagation();
    // the rest of your code
于 2013-05-24T09:27:41.217 回答
0

这是因为选择器“body，html”，它注册了两个单击事件处理程序，一个用于元素body，另一个用于html元素。因此，由于事件传播，任何单击都会导致事件处理程序被调用。这将导致a增加 2，因为 click 事件处理程序被调用了两次。

然后再次animate在每个单击函数中调用 html 和 body 元素，这将导致该complete函数在每次单击中被调用两次。因此，每次点击4都会添加总数a

尝试

$('body').click(function(){
    $(this).animate({
        scrollTop: $(test[a]).offset().top
    },{ duration: 100, queue: false, complete: function(){
        $(prvL).css({"background-color":"#fffeec",           "border":"0px solid #ff6600", "margin-left":"0px"});
        $(prvO).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"});
        $(prvA).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvD).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvI).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvN).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvG).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(somearr[a]).css({"background-color":"#fff", "border":"5px solid #ff6600", "margin-left":"-5px"}); 
        a++; //decided to impliment 4 times.
        console.log(a);
        if(a===7){a = 0; $(filler_six).hide(); $(filler).show();}
        clearDiv();     
    }}); //end of animation
}); //end of click function
// Clearing The Div's

对于火狐

$('html, body').click(function(e){
    e.stopPropagation();
    $('body').animate({
        scrollTop: $(test[a]).offset().top
    },{ duration: 100, queue: false, complete: function(){
        $(prvL).css({"background-color":"#fffeec",           "border":"0px solid #ff6600", "margin-left":"0px"});
        $(prvO).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"});
        $(prvA).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvD).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvI).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvN).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvG).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(somearr[a]).css({"background-color":"#fff", "border":"5px solid #ff6600", "margin-left":"-5px"}); 
        a++; //decided to impliment 4 times.
        console.log(a);
        if(a===7){a = 0; $(filler_six).hide(); $(filler).show();}
        clearDiv();     
    }}); //end of animation
}); //end of click function
// Clearing The Div's
于 2013-05-24T09:00:58.233 回答