8

配列の長さが 1000 であると仮定します。配列に格納されている画像パスを範囲外に移動することなく走査する簡単な方法を作成しようとしています。以下のメソッドは、「次へ」ボタンをクリックして配列インデックスをインクリメントする場合はモジュラスを使用してラップアラウンドを適切に処理しますが、インデックスから 1 つをデクリメントして差し引く必要がある場合 (ユーザーが前のボタンをクリックしたとき) は処理しません。

基本的に私がやろうとしていることは次のとおりです。

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

私の Javascript

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

ワーキングデモテスト

必要なのはこれだけです：

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

うーん、これがあなたが望んでいたものかどうかはわかりませんが、

$(".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 
/**
* @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;
}

この関数を使用してcounter、 int 数値を 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 に答える