javascript 如何发送动态Id发送getElementById到js函数

oxiaedzo  于 2022-12-21  发布在  Java
关注(0)|答案(1)|浏览(125)
<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标记。

4si2a6ki

4si2a6ki1#

  1. id属性中不支持空格。通常,应坚持使用字母数字ASCII友好字符(并且不要以数字开头)。除了字母和数字之外,还可以使用_-作为分隔符。
    1.在模板常量中(在反引号''之间)有一些多余的引号("),因为反引号已经自动将其内容转换为字符串。
    所以你可以变成:
<img id="myImg-item">
function myFunction(id){
    var string = `myImg-${id}`
    alert(string);
    
    var modal = document.getElementById("myModal");
    var img = document.getElementById(string);

现在,如果调用函数:myFunction('item'),它将组合ID "myImg-item",并且getElementById查找应该成功。
有关详细信息,请阅读MDN docs上的id属性

相关问题