8

假设数组的长度为 1000。我正在尝试创建一种简单的方法来遍历存储在数组中的图像路径而不会越界。下面的方法在单击“下一步”按钮以增加数组索引时使用模数很好地处理环绕，但当我必须从索引中减少并减去一个时（当用户单击上一个按钮时）。

基本上我想做的是：

998 -> click next -> 999
999 -> click next -> 0
0 -> click previous -> 999

我的 Java 脚本

var index = 0;

$('.catalog-img-container').attr("src", javascript_array[index]);
$(".next").click(function(){
        $('.catalog-img-container').attr("src", javascript_array[++index%arrayLength]);
    });         
$(".previous").click(function(){
    $('.catalog-img-container').attr("src", javascript_array[--index]);
    alert(index);

我感谢任何帮助

许多人提前感谢。

4

6 回答 6

11

可能有一个更优雅的方法来解决这个问题，但这很简单：

$(".previous").click(function(){
    if (--index < 0) index = arrayLength - 1;
    $('.catalog-img-container').attr("src", javascript_array[index%arrayLength]);
});
于 2013-01-14T20:08:13.967 回答
5

由于--index%arrayLength不起作用，只需在取模之前添加数组的长度：

index = (index+arrayLength-1) % arrayLength

你也可以做

(index+=arrayLength-1)%arrayLength

但这将导致index变得非常大，可能在足够长的时间内超出范围。

于 2013-01-14T20:05:56.863 回答
4

您也可以使用方便的对象。

var Cursor = function (array) {
  var idx = 0;
  this.prev = function () {
    idx = (!!idx ? idx : array.length) - 1;
    return array[idx];
  };
  this.current = function () {
    return array[idx];
  };
  this.next = function () {
    idx = (idx + 1) % array.length;
    return array[idx];
  };
  return this;
};

例如，

var $container = $(".catalog-img-container");
var cursor = new Cursor(javascript_array);

$container.attr("src", cursor.current());

$(".next").click(function(){
  $container.attr("src", cursor.next());
});         

$(".previous").click(function(){
  $container.attr("src", cursor.prev());
});
于 2013-01-14T20:18:54.520 回答
0

嗯，不确定这是否是您想要的，但是：

$(".previous").click(function(){if (index-1 <0){index = arrayLength -1;}

            $('.catalog-img-container').attr("src", javascript_array[--index]);
            //alert(index);
        });

我假设 arrayLength = javascript_array.length;

我希望这有帮助

于 2013-01-14T20:08:10.183 回答
0

工作演示测试

这就是你所需要的：

var index=0;

$('.catalog-img-container').attr("src", javascript_array[index]);

$(".next, .previous").click(function(){

  var MyClass = $(this).hasClass('next') ? index++ : index-- ;
  index = index==-1 ? arrayLength-1 : index%arrayLength ;  
  $('.catalog-img-container').attr("src", javascript_array[index]);

});
于 2013-01-14T20:15:07.723 回答
0 
/**
* @param {number} counter
* @param {number} maxValue
* @return {number}
* @desc Always returns a number between 0 and maxValue. Can be used to 
iterate through an array without "Range out of bounds" error.
*/
export default function mapToRange(counter, maxValue) {
  if (maxValue === undefined || maxValue === 0) return 0;
  // positive counter
  if (counter >= 0) return counter % maxValue;
  // negative counter
  const modulo = counter % maxValue;
  if (modulo === 0) {
      return modulo;
  }
  return modulo + maxValue;
}

我使用此函数将counterint 数映射到 0 和maxValue.

let counter = 0;
const array = ['apple', 'pear','peach'];
if(press arrow up) counter--;
else if (press arrow down) counter++;

let idx = mapInRange(counter, array.length)
console.log(array[idx]);

想象一下，您有一个下拉列表，并且您想使用箭头键在列表中导航。

于 2019-04-14T16:31:16.313 回答