0

複数の配列がサーバー側で自動的に生成され、セクション 1、セクション 2、セクション 3 などの名前で変更する方法はありません。配列ごとに最小で 1 つの値、各配列で最大で 50 の値が常に存在します。

配列リストの例:

section1 = ['ABC100', 'ABC105', 'ABC209'];
section2 = ['ABC400', 'ABC705', 'ABC629'];
section3 = ['ABC176', 'ABC136', 'ABC279'];

現在、各配列から 1 つの値をランダムに選択し、画像の src 属性を更新する必要があります。画像の HTML にアクセスできるので、クラスなどを変更できます。

現在の HTML の例:

<div id="wrapper">
    <img class="section1" src="">
    <img class="section2" src="">
    <img class="section3" src="">
</div>

一致する配列から値をランダムに選択し、画像の src を更新するための私の JavaScript と jQuery は次のとおりです。

var $pathName = '/images/gallery/';
var $fileExtension = '.jpg';

var $section1R = section1[Math.floor(Math.random()*section1.length)];

var $section2R = section2[Math.floor(Math.random()*section2.length)];

var $section3R = section3[Math.floor(Math.random()*section3.length)];

$('.section1').attr('src', $pathName + $section1R + $fileExtension);
$('.section2').attr('src', $pathName + $section2R + $fileExtension);
$('.section3').attr('src', $pathName + $section3R + $fileExtension);

これは本当に厄介なようです。それほど多くのコードを繰り返さずにこれをよりきれいにする方法はありますか? 機能することはわかっていますが、繰り返し機能をコーディングするより良い方法を学びたいです。

4

3 に答える 3

3

あなたはこれを行うかもしれません：

$('#wrapper img[class^=section]').attr('src', function(){
    var a = window[this.className];
    return $pathName + a[Math.floor(Math.random()*a.length)]+$fileExtension;
});

ただし、すべての変数をグローバル名前空間に置くことはお勧めしません。したがって、オブジェクトまたは配列を使用してそれらを保持します。

$また、変数名がjQuery セットを保持している場合にのみ、変数名を a で始めるのが通常の規則であることにも注意してください。ここでは、なぜそのような名前を付けたのかを知るのは困難です.

于 2013-01-22T11:52:50.837 に答える
2

配列を配列に入れます。

var sections = [section1, section2, section3];

次に、関数を渡しattr、反復のインデックスを使用して正しい配列にアクセスします。

$('#wrapper img').attr('src', function(index) {
    var section = sections[index];
    var value = section[Math.floor(Math.random() * section.length)];
    return $pathName + value + $fileExtension;
});
于 2013-01-22T11:53:11.953 に答える
0

3 つの選択はすべて同じことを行うため、これを関数に要約します。1つの方法は次のとおりです。

function rndElement(arrayElement)
{
   return arrayElement[Math.floor(Math.random()*arrayElement.length)];
}

var $section1R = rndElement(section1);
于 2013-01-22T11:54:55.597 に答える