javascript - jQuery - 如何根据变量值 .show() 和 .hide() 元素？

Question

我正在从头开始创建一个图像 slider 作为练习，但我似乎无法克服这个问题。我的四个图像彼此相邻排列，并且所有 .animate() 使用按钮单击前进和后退移动到下一个图像。

当然，我不希望用户按前进和后退按钮超过 4 次，因为这样他们就会看到一个本来应该是图像的空槽。我有一个变量，每次单击时都会递增/递减，当它大于或等于 3/-3 时，我希望按钮 .hide() 这样就无法单击它，并在值减小时重新出现/通过单击相反的按钮增加。我的代码:

<code>$(document).ready(function() {
    var $clickcount = 0;    //clicks of forward/prev counter

 $('#forwardbtn').click(function() {        //forward button clicked..

    $clickcount ++;     //increment clickcount +1
    $('#sliderimg1, #sliderimg2, #sliderimg3, #sliderimg4').animate(
    {left:'+=950px'}, 800,'easeInOutQuad');   

    if($clickcount >= 3 ) {     //if clickcount = 3
        $('#forwardbtn').hide();    //hide button so it cant be clicked
    } else {
        $('#forwardbtn').show(); }  //otherwise keep it shown..
 });

 $('#prevbtn').click(function() {   //function opposite of one above

    $clickcount --;
    $('#sliderimg1, #sliderimg2, #sliderimg3, #sliderimg4').animate(
    {left:'-=950px'}, 800,'easeInOutQuad');

    if($clickcount >= -3 ) {
        $('#prevbtn').hide();
    } else {
        $('#prevbtn').show(); }
 });    
 });</code>

如有任何帮助，感谢您的宝贵时间:)

Answer 1

看一下 Working fiddle 中的示例

改变forwardbtn的条件，如果egal 3隐藏它，否则显示两者，因为我们在(第一或第二)图像中。对于 prevbtn 条件 id，如果我们的位置等于零，我们必须隐藏按钮，因为第一个图像之前没有图像，否则我们必须显示两个图像。

完整的js:

var $clickcount = 0;    //clicks of forward/prev counter

$('#forwardbtn').click(function() {        //forward button clicked..    
    $clickcount ++;     //increment clickcount +1
    $('#sliderimg1, #sliderimg2, #sliderimg3, #sliderimg4').animate(
    {left:'+=950px'}, 800,'easeInOutQuad');

    if($clickcount == 3 ) {     //if clickcount = 3
        $('#forwardbtn').hide();    //hide button so it cant be clicked
    } else {
        $('#forwardbtn').show(); 
        $('#prevbtn').show();
    }  //otherwise keep it shown..
});

$('#prevbtn').click(function() {   //function opposite of one above
    $clickcount --;

    $('#sliderimg1, #sliderimg2, #sliderimg3, #sliderimg4').animate(
    {left:'-=950px'}, 800,'easeInOutQuad');

    if($clickcount == 0 ) {
        $('#prevbtn').hide();
    } else {
        $('#prevbtn').show(); 
        $('#forwardbtn').show(); 
    }
});