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

My current script identifies an element in my HTML with this line

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

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

Is there a way to use one instance of on multiple ids - in my case image tags. This current script affects only one image with its effect. I want to use that one script to affect multiple images in my code.

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

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

I know that doesn't work :) just trying to further illustrate :)

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

6 个解决方案

#1

The other answers here show you how to set all three to the same image.

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

If you want them each to get different images, then:

如果你想让他们每个人得到不同的图像，那么：

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

If you pass a function into attr as the second argument, it gets called for each element in the set, and the return value is used for the attribute value.

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

#2

in Jquery

在Jquery

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

try using this code

尝试使用此代码

Working Demo http://jsfiddle.net/cse_tushar/MYua5/1/

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

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

Random generation of images

随机生成图像

Working demo http://jsfiddle.net/cse_tushar/MYua5/3/

工作演示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]);
});

new code

新代码

working Demo http://jsfiddle.net/cse_tushar/MYua5/4/

工作演示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);

#3

you need to use the id selector - id prefixed with # with multiple selector - selectors separated by , here

你需要使用id选择器 - id前缀为＃，多个选择器 - 选择器分隔，在这里

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

#4

You can use id selector and combine ids with comma using multiple selector

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

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

ID Selector (“#id”)

ID选择器（“＃id”）

For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match, reference.

对于id选择器，jQuery使用JavaScript函数document.getElementById（），这非常有效。当另一个选择器附加到id选择器时，例如h2＃pageTitle，jQuery在将元素标识为匹配引用之前执行额外的检查。

Multiple Selector (“selector1, selector2, selectorN”)

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

You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order. An alternative to this combinator is the .add() method, reference.

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

#5

If you have a variable number of images and don't want to insert the id of each of them into the array, you could try using .each().

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

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

You then need to add the class to the images you want, instead of using their ids.

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

Ref: http://api.jquery.com/jQuery.each/

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

However, if you definitely want to avoid using class, you can separate Ids by a comma:

但是，如果您肯定想避免使用类，可以用逗号分隔ID：

$("#segement1,#segement2,#segement3").attr('src',images[random_no]);

#6

If you don't want same image twice:

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

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

#1