Javascript jQuery-如何显示（）。隐藏（）基于变量值的元素？

作为一点练习，我从头开始创建一个图像滑块，但我似乎无法克服这个问题。我的四幅图像相邻排列，全部。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>

---

感谢您的帮助：）

应在两个单击处理程序中同时检查

单击计数

，否则，如果单击了

单击计数=3

并单击了后退按钮，则前进按钮不会显示回来

$(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..
    if($clickcount <= -3 ) {
      $('#prevbtn').hide();
    } else {
      $('#prevbtn').show(); 
    }

  });

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

$（文档）.ready（函数（）{
var$clickcount=0；//向前/向前计数器的单击
$（'#forwardbtn'）。单击（函数（）{//forward按钮已单击。。
$clickcount++；//递增clickcount+1
$（“#sliderimg1、#sliderimg2、#sliderimg3、#sliderimg4”）。设置动画(
{左：'+=950px'}，800，'easeInOutQuad'）；
如果（$clickcount>=3）{//如果clickcount=3
$（'#forwardbtn'）.hide（）；//隐藏按钮，使其无法单击
}否则{
$（'#forwardbtn'）.show（）；
}//否则，请保持显示。。
如果（$clickcount则应在两个单击处理程序中都执行对
clickcount
的两个检查，否则如果单击了
clickcount=3
并单击了后退按钮，则不会显示后退按钮

$(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..
    if($clickcount <= -3 ) {
      $('#prevbtn').hide();
    } else {
      $('#prevbtn').show(); 
    }

  });

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

$（文档）.ready（函数（）{
var$clickcount=0；//向前/向前计数器的单击
$（'#forwardbtn'）。单击（函数（）{//forward按钮已单击。。
$clickcount++；//递增clickcount+1
$（“#sliderimg1、#sliderimg2、#sliderimg3、#sliderimg4”）。设置动画(
{左：'+=950px'}，800，'easeInOutQuad'）；
如果（$clickcount>=3）{//如果clickcount=3
$（'#forwardbtn'）.hide（）；//隐藏按钮，使其无法单击
}否则{
$（'#forwardbtn'）.show（）；
}//否则，请保持显示。。
如果（$clickcount请查看

如果egal 3隐藏，则更改转发BTN的条件，否则显示两者，因为我们在（第一个或第二个）图像中。对于
prevbtn
条件id，如果我们定位egal零，则必须隐藏按钮，因为在第一个图像之前没有图像，否则必须显示两者

完整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(); 
    }
});   

请看

如果egal 3隐藏，则更改转发BTN的条件，否则显示两者，因为我们在（第一个或第二个）图像中。对于
prevbtn
条件id，如果我们定位egal零，则必须隐藏按钮，因为在第一个图像之前没有图像，否则必须显示两者

完整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(); 
    }
});   

你的问题是什么？它在做什么？你有什么问题？还可以查看jQuery的
切换
方法：当变量值减少时，prev/forward按钮不会重新出现。你必须在每次单击时进行函数调用，以检查值
if（$clickcount>=-3）
应该是
if（$clickcount您的问题是什么？它在做什么？您有什么问题？还可以查看jQuery的
切换
方法：当变量值减少时，prev/forward按钮不会重新出现。您必须在每次单击时进行函数调用，以检查值
如果（$clickcount>=-3）
应该是
如果（$clickcount感谢大家的评论，他们都帮了大忙！对不起，我不同意你的观点，但我是这个网站的新手，所以我只是尽我所能提高了投票率。我的不好！谢谢大家的评论，他们都帮了大忙！对不起，我不同意你，但我是这个网站的新手，所以我只是尽我所能提高了投票率。我的不好！为什么我们必须签入两个单击处理程序？？每次单击检查一次clickcount就足够了。想象一下这样的场景：
clickcount=3
所以前进按钮是隐藏的。用户单击后退按钮，所以
clickcount=2
。您需要再次显示前进按钮，并且您必须在后退按钮处理程序中这样做，因为唯一被执行的一个。当
点击计数=-3
并且用户按下“前进”按钮请勾选我的答案时，同样的情况，您只需添加show（）另一边是前进…为什么我们必须签入两个单击处理程序？每次单击检查一次clickcount就足够了。想象一下这样的场景：
clickcount=3
所以前进按钮是隐藏的。用户单击后退按钮，所以
clickcount=2
。您需要再次显示前进按钮，并且必须在后退按钮处理程序，因为它是唯一被执行的。同样的情况是当
单击count=-3
并且用户按下前进按钮请检查我的答案时，您只需在另一侧添加前进的show（）。。。