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

我认为您可能错过的最重要的事情是，当您单击向下箭头时，您需要减少 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();
});​