Javascript 如何获取ng repeat中生成的每个图像的id？

在下面的html中，我试图显示一个由8个单元格组成的表 。每个单元格显示一个图像，单击图像后调用changeImage函数，该函数获取图像id并更改图像

//但它只更改了一个单元格的图像。当我单击表中任何单元格的图像时，只有第一个单元格的图像在更改。我知道这是因为img标记中声明了id=“myImage”。我正在尝试为每个图像生成单独的id，但无法做到这一点。
函数changeImage（）{
var image=document.getElementById（'myImage'）；
if（image.src.match（“bulbon”））{
image.src=“pic_bulboff.gif”；
}否则{
image.src=“pic_bulbon.gif”；
}
}

你好
{{ElementObj.a.b}}首先，您需要传递图像的动态id，所以在传递该id之后，在id属性中打印$index值
作为函数中的参数，将帮助您更改当前图像的图像

    <img id="myImage"  onclick="changeImage(this)" src="pic_bulboff.gif" width="100" height="180">

function changeImage (e) {
  e.src = "PASS YOUR IMAGE PATH";
}


函数更改图像（e）{
e、 src=“传递图像路径”；
}
首先，您需要传递图像的动态id，因此，在传递后，请在id属性中打印$index值
作为函数中的参数，将帮助您更改当前图像的图像

    <img id="myImage"  onclick="changeImage(this)" src="pic_bulboff.gif" width="100" height="180">

function changeImage (e) {
  e.src = "PASS YOUR IMAGE PATH";
}


函数更改图像（e）{
e、 src=“传递图像路径”；
}
不能对一组元素使用相同的
id
，因为id在页面中应该是唯一的

我建议您使用event属性，因为它已经包含您单击的目标元素：

<th ng-repeat="ElementObj in Obj.Element">
    <div>
        <img id="myImage" ng-click="changeImage($event)" src="pic_bulboff.gif" width="100" height="180">

    </div>
</th>

参考：
不能对一组元素使用相同的
id
，因为id在页面中应该是唯一的

我建议您使用event属性，因为它已经包含您单击的目标元素：

<th ng-repeat="ElementObj in Obj.Element">
    <div>
        <img id="myImage" ng-click="changeImage($event)" src="pic_bulboff.gif" width="100" height="180">

    </div>
</th>

参考资料：

您不需要使用
src
或
id
来处理更改图像，因为您已经有了一个模型，可以更改模型而不是元素

默认情况下，我们通过
ng init
设置
src
，然后在控制器中更改它，如下示例：


var-app=angular.module（“app”，[]）；
应用程序控制器（“ctrl”，函数（$scope）{
$scope.elements=[{
标题：“A”
},
{
标题：“B”
}
]
$scope.changeImage=函数（元素）{
变量a=”https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQizZdER3przCQLcVB5b66j02wFyNRXxYIoYXIjqyntm2tpjIRA";
变量b=”https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
element.src=element.srcType？a:b；
element.srcType=！element.srcType；
}
})
img{
宽度：200px
}

{{element.title}
您不需要使用
src
或
id
来处理更改图像，因为您已经有了一个模型，可以更改模型而不是元素

默认情况下，我们通过
ng init
设置
src
，然后在控制器中更改它，如下示例：


var-app=angular.module（“app”，[]）；
应用程序控制器（“ctrl”，函数（$scope）{
$scope.elements=[{
标题：“A”
},
{
标题：“B”
}
]
$scope.changeImage=函数（元素）{
变量a=”https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQizZdER3przCQLcVB5b66j02wFyNRXxYIoYXIjqyntm2tpjIRA";
变量b=”https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
element.src=element.srcType？a:b；
element.srcType=！element.srcType；
}
})
img{
宽度：200px
}

{{element.title}
为什么在Angularjs应用程序中使用
onClick
？您应该使用
ngClick
指令。在Angularjs中很少有任何理由从DOM查询元素您的ElementObj是什么样子的？您只需要查看代码并使用模型来处理它，请参阅我的回答为什么在Angularjs应用程序中使用
onClick
？您应该使用
ngClick
指令。在AngularJS中，很少有任何理由从DOM查询元素您的ElementObj是什么样子的？您只需要查看代码并使用模型来处理它，请参阅我的回答can u detaileth“可以很容易地作为注释发布，即使这样也不会有任何帮助@rajnikanthsabnekar-你可以用类似的东西来更改
ng click=“changeImage（）”src=“pic_bulboff.gif”
，比如
ng click=“ElementObj.bulbon=！ElementObj.bulbon”ng src=“{{ElementObj.bulbon？”pic bulbon.gif:'pic_bulboff.gif'}”
@Alon实际上我是通过电话联系到的，所以我在正确编辑.NP时遇到了问题，因此，当您使用计算机时，请尝试使用更多详细信息对其进行改进；）你能详细说明一下吗？这很容易被贴成评论，即使这样也不会有什么帮助@rajnikanthsabnekar-你可以用类似的东西来更改
ng click=“changeImage（）”src=“pic_bulboff.gif”
，比如
ng click=“ElementObj.bulbon=！ElementObj.bulbon”ng src=“{{ElementObj.bulbon？”pic bulbon.gif:'pic_bulboff.gif'}”
@Alon实际上我是通过电话联系到的，所以我在正确编辑.NP时遇到了问题，因此，当您使用计算机时，请尝试使用更多详细信息对其进行改进；）