不使用 getElementById 的多个元素 onclick 的 JS 函数答案

【问题标题】：JS function for a number of elements onclick without using getElementById不使用 getElementById 的多个元素 onclick 的 JS 函数
【发布时间】：2021-10-24 00:44:42
【问题描述】：

.Net 5.0 Javascript

当单击图像链接 MouseClickIconRow1 或 MouseClickIconRow2 等时，我有以下代码来禁用 UI 上的所有元素。

但是，我不能为所有元素提供相同的 ID，因为我的 ID 对于 UI 测试是唯一的。

我试图为getElementsByName 创建一个循环，但我无法让它工作。我也一直在尝试传递一个唯一的元素 ID，如下所示。我对 Javascript 很陌生。

HTML

<img src="@Model.MouseClickIconThumbnailUrl" id="MouseClickIconRow1" name="IconClick" onclick="DisableEnableLinks(this, true)" width="20" height="35" alt="Mouse Click Here Image"></a>

<img src="@Model.MouseClickIconThumbnailUrl" id="MouseClickIconRow2" name="IconClick" onclick="DisableEnableLinks(this, true)" width="20" height="35" alt="Mouse Click Here Image"></a>

Javascript

function DisableEnableLinks(elem ,xHow) {
    document.getElementById(elem).onclick
        = function () {
            objLinks = document.links;
            for (i = 0; i < objLinks.length; i++) {
                objLinks[i].disabled = xHow;
                //link with onclick
                if (objLinks[i].onclick && xHow) {
                    objLinks[i].onclick =
                        new Function("return false;" + objLinks[i].onclick.toString().getFuncBody());
                }
                //link without onclick
                else if (xHow) {
                    objLinks[i].onclick = function () { return false; }
                }
                //remove return false with link without onclick
                else if
                    (!xHow && objLinks[i].onclick.toString().indexOf("function(){return false;}") != -1) {
                    objLinks[i].onclick = null;
                }
                //remove return false link with onclick
                else if (!xHow && objLinks[i].onclick.toString().indexOf("return false;") != -1) {
                    strClick = objLinks[i].onclick.toString().getFuncBody().replace("return false;", "")
                    objLinks[i].onclick = new Function(strClick);
                }
            }
        }
}
String.prototype.getFuncBody = function () {
    var str = this.toString();
    str = str.replace(/[^{]+{/, "");
    str = str.substring(0, str.length - 1);
    str = str.replace(/\n/gi, "");
    if (!str.match(/\(.*\)/gi)) str += ")";
    return str;
}

【问题讨论】：

标签： javascript asp.net .net

【解决方案1】：

这可能会有所帮助：

var btnDiv = document.getElementsByClassName("btnContainer");
btnDiv[0].addEventListener("click", function() { console.log("Hello"); });

<div class="btnContainer">
    <input type="button" id="btn1" class="jsBtn" value="button1"/>
    <input type="button" id="btn2" class="jsBtn" value="button2"/>
</div>

【讨论】：

【解决方案2】：

我的 HTML 不正确。我需要在 onclick 中将每个元素的唯一 ID 指定为字符串。

onclick="DisableEnableLinks('MouseClickIconRow1', true)"

【讨论】：

【解决方案3】：

您可以将document.querySelectorAll() 函数与适当的选择器一起使用并遍历返回的集合。

例如

document.querySelectorAll("img[name='IconClick']").forEach(function(el) {
    //do your stuff here... e.g.
    console.log(el.id);
})

【讨论】：