Question

我正在制作带有左右两个按钮的幻灯片，当点击按钮时，图像src会发生变化，新图像会出现。图像的位置存储在一个数组中，++运算符用于移动照片，而--用于以前有时它不起作用我必须双击按钮才能工作。为什么会这样？

HTML

<div class="row">
        <div class="col-xs-1">
            <a href="" id="left"><img src="images/left.png" width="80px"    height="80px"></a>
        </div>
        <div class="col-xs-6">
            <img src="images/1.jpg" id="image">
        </div>
        <div class="col-xs-1">
            <a href="" id="right"><img src="images/right.png" width="80px"  height="80px"></a>
        </div>
    </div>

Jquery的

var count = 1;

        var imagesLocation = ['images/1.jpg',
                              'images/2.jpg',
                              'images/3.jpg',
                              'images/4.jpg',
                              'images/5.jpg'];

        $('#right').on('click',function(e){
            e.preventDefault();
            if(count < 6){
                $('#image').attr('src',imagesLocation[count]);
                count++;
            }
        });

        $('#left').on('click',function(e){
            e.preventDefault();
            count--;
            $('#image').attr('src',imagesLocation[count]);

        });

Answer 1

数组索引从0而不是1

开始

var count = 0;
//----------^--- update here

var imagesLocation = ['images/1.jpg',
  'images/2.jpg',
  'images/3.jpg',
  'images/4.jpg',
  'images/5.jpg'
];

$('#right').on('click', function(e) {
  e.preventDefault();
  if (count < imagesLocation.length) {
    //--------^----- .length can be use instead, so this will work even if array size changed
    $('#image').attr('src', imagesLocation[++count]);
    //-------------------------------------^--  ++count will increment the count, then returns the incremented count value    
  }
});

$('#left').on('click', function(e) {
  e.preventDefault();
  if (count > 0) {
    //------^---- to avoid negative index    
    $('#image').attr('src', imagesLocation[--count]);
    //-------------------------------------^--  --count will decrements the count, then returns the decremented count value
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-1">
    <a href="" id="left">
      <img src="images/left.png" width="80px" height="80px">
    </a>
  </div>
  <div class="col-xs-6">
    <img src="images/1.jpg" id="image">
  </div>
  <div class="col-xs-1">
    <a href="" id="right">
      <img src="images/right.png" width="80px" height="80px">
    </a>
  </div>
</div>

Answer 2

试试这个...

    var count = 0;

    var imagesLocation =      ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];

    $('#right').on('click', function(e) {
      e.preventDefault();
      if (count < 5) {
    $('#image').attr('src', imagesLocation[count]);
     count++;
     }
    });

    $('#left').on('click', function(e) {
      e.preventDefault();
      count--;
    $('#image').attr('src', imagesLocation[count]);

    });

数组索引从0开始......

Javascript（Jquery），递增/递减++ / - 运算符计算错误

2 个答案: