Question

我有5个缩略图排成一行，2个箭头可以上下滑动。现在，你可以点击两次，然后点击两次 - 就是这样，没有任何动作。我的目标是能够多次返回并上下点击。

$('#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();
});

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

2 个答案: