Question

我当前的脚本使用此行标识HTML中的元素

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

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

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

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

Answer 1

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

Answer 2

此处的其他答案显示如何将所有三个设置为相同的图像。

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

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

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

Answer 3

您可以使用id selector并使用multiple selector

将ID与逗号结合使用

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

ID选择器（“＃id”）

对于id选择器，jQuery使用JavaScript函数 document.getElementById（），效率极高。当另一个 selector附加到id选择器，例如h2＃pageTitle，jQuery 在将元素标识为a之前执行附加检查匹配，reference。

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

您可以指定任意数量的选择器组合成一个结果。这种多表达组合子是一种有效的方法选择不同的元素。中的DOM元素的顺序返回的jQuery对象可能不一样，因为它们将在文件订单。这个组合子的替代方法是.add（）方法，reference。

Answer 4

您需要使用id selector - 以#为前缀的multiple selector - ,分隔的选择器

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

Answer 5

如果您有不同数量的图片，并且不想将每个图片的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]);

Answer 6

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

DEMO

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

Jquery getElementById - 一个脚本标记内的多个实例？

6 个答案: