Question

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

当然，我不希望用户按下前进＆amp;返回按钮超过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

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..
    });
  });

Answer 2

查看 Working fiddle

中的示例

更改#include <iostream> using std::cout; int main() { cout << "Sizeof cout object: " << sizeof(cout) << '\n'; cout << "Sizeof cin object: " << sizeof(std::cin) << '\n'; }的条件，如果egal 3隐藏它，则显示两者，因为我们处于（第1或第2）图像。对于forwardbtn条件id，如果我们的位置为零，我们必须隐藏按钮，因为在第一张图像之前没有图像，否则我们必须显示两者。

完整js：

prevbtn

jQuery - 如何.show（）＆amp; .hide（）一个基于变量值的元素？

2 个答案: