jquery 使用mod环绕

13z8s7eq  于 12个月前  发布在  jQuery
关注(0)|答案(6)|浏览(198)

假设数组的长度为1000。我试图创建一个简单的方法来遍历存储在数组中的图像路径而不越界。下面的方法在点击“下一个”按钮以增加数组索引时可以很好地处理使用模数的回绕,但是当我必须从索引中递减和减去一时(当用户点击上一个按钮时)。
基本上我想做的是:

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

字符串
我的Javacript

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


我很感激任何帮助
很多人提前感谢。

sdnqo3pr

sdnqo3pr1#

可能有一个更优雅的方法,但这很简单:

$(".previous").click(function(){
    if (--index < 0) index = arrayLength - 1;
    $('.catalog-img-container').attr("src", javascript_array[index%arrayLength]);
});

字符串

qgzx9mmu

qgzx9mmu2#

在取模之前加上数组的长度:

index = (index + arrayLength) % arrayLength

字符串

1cklez4t

1cklez4t3#

你也可以使用一个方便的对象。

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

k0pti3hp

k0pti3hp4#

我不确定这是不是你想要的,但是:

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

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

字符串
我假设arrayLength = JavaScript_array.length;
我希望这能帮助

6vl6ewon

6vl6ewon5#

WORKING DEMO TEST

这就是你所需要的:

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]);

});

字符串

apeeds0o

apeeds0o6#

/**
* @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;
}

字符串
我使用这个函数来Mapcounter,一个整数到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]);


假设你有一个下拉列表,你想用箭头键在列表中导航。

相关问题