1

我当前的脚本用这一行标识了我的 HTML 中的一个元素

document.getElementById("one" ).src = images[random_no];

有没有办法在多个 id 上使用一个实例 - 在我的例子中是图像标签。此当前脚本仅影响一个图像及其效果。我想使用那个脚本来影响我的代码中的多个图像。

document.getElementById("one, two, three" ).src = images[random_no];

我知道这不起作用:)只是想进一步说明:)

4

6 回答 6

3

在jQuery中

$("#one,#two,#three").attr('src',images[random_no]);

尝试使用此代码

工作演示http://jsfiddle.net/cse_tushar/MYua5/1/

i=0;
$("#one, #two, #three" ).attr("src", function() {
    i++;
    return i+'.jpg';
});

随机生成图像

工作演示http://jsfiddle.net/cse_tushar/MYua5/3/

function randomFromInterval(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
}
var images = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');
var len = images.length;
$("#one, #two, #three").each(function () {
    x = randomFromInterval(0, len-1);
    var img_no = (x >= 0 && x < len) ? x : randomFromInterval(0, len-1);
    $(this).attr('src', images[img_no]);
});

新代码

工作演示http://jsfiddle.net/cse_tushar/MYua5/4/

var images = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');
var len = images.length;
i = 0;

function getImages() {
    $("#one, #two, #three").each(function () {
        $(this).attr('src', images[i]).attr('alt', images[i]);
        if (i == len-1) {
            i = 0;
        } else {
            i++;
        }
        console.log(i);
    });
}
getImages();
setInterval(getImages, 1000);
于 2013-07-26T11:56:05.330 回答
3

这里的其他答案向您展示了如何将所有三个设置为相同的图像。

如果您希望他们每个人都获得不同的图像，那么：

$("#one, #two, #three" ).attr("src", function() {
    /* ...generate new random_no here... */
    return images[random_no];
});

如果将函数attr作为第二个参数传入，它会为集合中的每个元素调用，并且返回值用于属性值。

于 2013-07-26T11:58:55.497 回答
2

如果您有可变数量的图像并且不想将每个图像的 id 插入到数组中，您可以尝试使用.each().

$(".class").each(function() {
    $(this).attr('src', images[random_no]);
});

然后，您需要将类添加到您想要的图像中，而不是使用它们的 id。

参考：http ://api.jquery.com/jQuery.each/

但是，如果您绝对想避免使用类，则可以用逗号分隔 Id：

$("#segement1,#segement2,#segement3").attr('src',images[random_no]);
于 2013-07-26T12:14:29.183 回答
2

您可以使用id 选择器并使用多个选择器将 id 与逗号组合 

$("#one, #two, #three" ).attr(href,images[random_no]);

ID 选择器（“#id”）

对于 id 选择器，jQuery 使用 JavaScript 函数 document.getElementById()，效率极高。当另一个选择器附加到 id 选择器时，例如 h2#pageTitle，jQuery 在将元素标识为匹配项之前执行额外的检查，reference。

多重选择器（“selector1，selector2，selectorN”）

您可以指定任意数量的选择器组合成一个结果。这种多表达式组合器是选择不同元素的有效方法。返回的 jQuery 对象中的 DOM 元素的顺序可能不相同，因为它们将按文档顺序排列。此组合器的替代方法是 .add() 方法，reference。

于 2013-07-26T11:56:18.267 回答
2

您需要使用id 选择器#-以多个选择器为前缀的 id - 选择器由,此处分隔

$("#one, #two, #three").attr('src',images[random_no]);
于 2013-07-26T11:56:28.163 回答
0

如果您不想要两次相同的图像：

演示

var images = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');
$("#one, #two, #three").each(function(){
    var l = images.length,
        random_no = Math.floor(l*Math.random());    
    $(this).attr('src',images[random_no]);
    images.splice(random_no,1);    
});
于 2013-07-26T12:15:03.380 回答