javascript - 如何在javascript中重复或重置一个函数？

Question

我有 5 个缩略图排列在一起，2 个箭头可以上下滑动它们。现在，您可以向上单击两次和向下单击两次——就是这样，没有任何动作。我的目标是能够返回并多次单击上下。

http://jsfiddle.net/acfS6/

$('#tmbDown').css ('opacity', '.6');

var timesClickedUp = 0;     

$('#tmbUp').bind('click', function (event) {

  $("#tmbHolder").animate({"marginTop": "-=100px"}, "slow");
  timesClickedUp++;

  if (timesClickedUp >= 2) {
    $(this).unbind(event);
    $('#tmbDown').css ('opacity', '1');
    $('#tmbUp').css ('opacity', '.6');    

  }

});


var timesClickedDown = 0;

$('#tmbDown').bind('click', function (event) {

  $("#tmbHolder").animate({"marginTop": "+=100px"}, "slow")
  timesClickedDown++;

  if (timesClickedDown >= 2) {
    $(this).unbind(event);    
    $('#tmbDown').css ('opacity', '.6');
    $('#tmbUp').css ('opacity', '1');
  }



});
​

Answer 1

请检查这个。一个小的变化：http: //jsfiddle.net/wghk8/

var timesClickedUp = 0;


$('#tmbUp').bind('click', function(event) {

if (timesClickedUp < 2) {
    $("#tmbHolder").animate({
        "marginTop": "-=100px"
    }, "slow");
    timesClickedUp++;
}
else {

    $("#tmbHolder").animate({
        "marginTop": "+=" + (timesClickedUp * 100) + "px"
    }, "slow");
    timesClickedUp = 0;
}
});
var timesClickedDown = 0;

$('#tmbDown').bind('click', function(event) {
if (timesClickedDown < 2) {
    $("#tmbHolder").animate({
        "marginTop": "+=100px"
    }, "slow")
    timesClickedDown++;
}
else {
    $("#tmbHolder").animate({
        "marginTop": "-=" + (timesClickedDown * 100) + "px"
    }, "slow");
    timesClickedDown = 0;
}
});​

Answer 2

我认为您可能错过的最重要的事情是，当您单击向下箭头时，您需要减少您的 timesClickedUp ，反之亦然。

然后，您需要根据相应的“timesClicked”值的值淡化/显示两个箭头。

我是这样做的：

http://jsfiddle.net/acfS6/2/

var timesClickedUp = 0,
    timesClickedDown = 2;

function updateOpacities() {
    var $tmbUp = $('#tmbUp'),
        $tmbDown = $('#tmbDown');

    timesClickedUp >= 2 ? $tmbUp.css('opacity', '.6') : $tmbUp.css('opacity', '1');
    timesClickedDown >= 2 ? $tmbDown.css('opacity', '.6') : $tmbDown.css('opacity', '1');
}

// Call updateOpacities to initialize the arrows.
updateOpacities();

$('#tmbUp').bind('click', function(event) {

    if (timesClickedUp < 2) {
        $("#tmbHolder").animate({
            "marginTop": "-=100px"
        }, "slow");
        timesClickedUp++;
        timesClickedDown--;
    }

    updateOpacities();
});



$('#tmbDown').bind('click', function(event) {

    if (timesClickedDown < 2) {
        $("#tmbHolder").animate({
            "marginTop": "+=100px"
        }, "slow")
        timesClickedDown++;
        timesClickedUp--;
    }
    updateOpacities();
});​