자바 스크립트에서 함수를 반복 또는 재설정하는 방법은 무엇입니까?

Question

는 I 줄을 함께 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(); 
});​ 

Answer 2

이를 확인하시기 바랍니다. 작은 변화 : 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; 
} 
});​