Javascript 使用foreach循环和一个<；img>；标签

我有一组图像。我想随机显示图像。我称之为图像的每个循环的内部。假设我有10条记录，因此应该从脚本中给定的一组图像中随机显示10个图像。但问题是只有一个图像将显示，而其余的图像将不可见。循环工作正常。getElementById是否只能用于一个id一次？？请帮我解决这件事，我哪里做错了

这是代码

<script>
    var myPix = new Array("/Contents/img/CarrerGuide/office-1.png",
        "/Contents/img/CarrerGuide/office-2.png",
        "/Contents/img/CarrerGuide/office-3.png",
        "/Contents/img/CarrerGuide/office-4.png",
        "/Contents/img/CarrerGuide/office-5.png",
        "/Contents/img/CarrerGuide/office-6.png",
        "/Contents/img/CarrerGuide/office-7.png",
        "/Contents/img/CarrerGuide/office-8.png",
        "/Contents/img/CarrerGuide/office-9.png",
        "/Contents/img/CarrerGuide/office-10.png");

    var randomNum = Math.floor(Math.random() * myPix.length);
    document.getElementById("myPicture").src = myPix[randomNum];
</script>

@{ var counter = 1; }
    <tr>
    @foreach (var item in Model)
    {
        <td>
            <img id="myPicture" name="myPicture" alt="some image"  class="img-responsive">
            item.jobPosition
        </td>

        if (counter % 3 == 0)  //Display 3 courses at a row
        {
            @:</tr><tr>
        }
        counter++;
    }

var myPix=新数组（“/Contents/img/carrrguide/office-1.png”，
“/Contents/img/CarrerGuide/office-2.png”，
“/Contents/img/CarrerGuide/office-3.png”，
“/Contents/img/CarrerGuide/office-4.png”，
“/Contents/img/CarrerGuide/office-5.png”，
“/Contents/img/CarrerGuide/office-6.png”，
“/Contents/img/CarrerGuide/office-7.png”，
“/Contents/img/CarrerGuide/office-8.png”，
“/Contents/img/CarrerGuide/office-9.png”，
“/Contents/img/CarrerGuide/office-10.png”）；
var randomNum=Math.floor（Math.random（）*myPix.length）；
document.getElementById（“myPicture”）.src=myPix[randomNum]；
@{var counter=1；}
@foreach（模型中的var项目）
{
项目.职位
if（计数器%3==0）//一行显示3个课程
{
@:
}
计数器++；
}

您必须选择属性名为

$（'[name=\'myPicture\']'）

的所有元素，并迭代它们以更改每个元素的

src

。在您的示例中，没有为每个元素获取

randomNum

还请注意，对于同一文档中的多个元素，不应使用相同的

is

s

var myPix=[“/Contents/img/CarrerGuide/office-1.png”，
“/Contents/img/CarrerGuide/office-2.png”，
“/Contents/img/CarrerGuide/office-3.png”，
“/Contents/img/CarrerGuide/office-4.png”，
“/Contents/img/CarrerGuide/office-5.png”，
“/Contents/img/CarrerGuide/office-6.png”，
“/Contents/img/CarrerGuide/office-7.png”，
“/Contents/img/CarrerGuide/office-8.png”，
“/Contents/img/CarrerGuide/office-9.png”，
“/Contents/img/CarrerGuide/office-10.png”
];
$（'[name=\'myPicture\']'）。每个（函数（）{
var randomNum=Math.floor（Math.random（）*myPix.length）；
this.src=myPix[randomNum]；
});

randomNum

只创建一次，不在循环中创建

id

应该是唯一的，您正在使用相同的

id

创建10个

img

，这样每个

img

通过

$（'.img responsive'）

获得相同的pictureget元素，并为循环中的每个元素设置图像@depperm的问题是，即使我没有得到同样的图片10次。图像只显示一次，其余的不会显示。抱歉，更正jquery使用

文档。getElementById

将返回第一个元素，该元素具有所述

id

而不是multipleTanks@Rayon Dabre。这是我所期望的。谢谢。