0

多个数组是在服务器端自动生成的，无法使用名称对其进行修改：section1、section2、section3 等等。每个数组始终至少有一个值，每个数组中最多有 50 个值。

示例数组列表：

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

我目前需要从每个数组中随机选择一个值并更新图像 src 属性。我确实可以访问图像 HTML，因此可以更改类等。

当前的 HTML 示例：

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

我的 javascript 和 jQuery 从它的匹配数组中随机选择一个值并更新图像 src 是：

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

将其总结为一个函数，因为所有三个选择都执行相同的操作。一种方法可能是：

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

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