<div id="product-zoom-gallery" class="product-image-gallery">
@foreach (var item in Model.Images)
{
<a onclick="myFunction('@item')" class="product-gallery-item active" href="#" @*onclick="changeImg('/@item');"*@
data-image="/@item"
data-zoom-image="/@item">
<img id="myImg @item" src="/@item"
>
</a>
}
</div>
我想发送一个动态ID到myFunction(item)
,其中“item”是我的动态ID,我想像这样发送到getElementById方法:
function myFunction(item){
var string = `"myImg ${item}"`
alert(string);
var modal = document.getElementById("myModal");
var img = document.getElementById(`"${string}"`);
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
}
但是var img
对我不起作用。我希望从var img = document.getElementById(
“${string}”);
中找到我的img标记。
1条答案
按热度按时间4si2a6ki1#
id
属性中不支持空格。通常,应坚持使用字母数字ASCII友好字符(并且不要以数字开头)。除了字母和数字之外,还可以使用_
或-
作为分隔符。1.在模板常量中(在反引号''之间)有一些多余的引号(
"
),因为反引号已经自动将其内容转换为字符串。所以你可以变成:
现在,如果调用函数:
myFunction('item')
,它将组合ID"myImg-item"
,并且getElementById查找应该成功。有关详细信息,请阅读MDN docs上的
id
属性