如何将事件侦听器添加到单选按钮 - 地雷不触发

Question

我有一些日期输入，但我只想在用户单击“日期范围”单选按钮时显示它们。 所以我的 html 看起来像这样：

@*@Html.RadioButton("radioTimeFilter", "range", false) Date Range*@
<input id="radioTimeFilter" type="radio" value="false"> Date Range
<div class="radio-content" style="display:none;">
    <input id="txtDateOneFilter" type="text" style="width: 70px;" placeholder="Start Date" />&nbsp;to&nbsp;
    <input id="txtDateTwoFilter" type="text" style="width: 70px;" placeholder="End Date" />
</div>
<br />

我更喜欢使用 html.radiobutton 但 w/e 工作。

现在我的折叠功能如下所示：

function addCollapsibleCapabilities(coll) {
    for (var i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function () {
            alert(coll);
            this.classList.toggle("active");

            var content = this.nextElementSibling;
            if (content.style.display === "block") {
                content.style.display = "none";
            } else {
                content.style.display = "block";
            }
        });
    }
}

我导入文件并添加功能

    var collapseDateRange = document.getElementById("radioTimeFilter");
    addCollapsibleCapabilities(collapseDateRange);

我的警报没有触发。

Answer 1

您期望 collapseDateRange 为 Array，这在您使用document.getElementById()选择元素时不会出现这种情况。 它总是会给你一个元素对象。 只需删除 forloop 并直接在coll对象上设置侦听器。

function addCollapsibleCapabilities(coll) {
    coll.addEventListener("click", function () {
        alert(coll);
        this.classList.toggle("active");

        var content = this.nextElementSibling;
        if (content.style.display === "block") {
            content.style.display = "none";
        } else {
            content.style.display = "block";
        }
}

如果您有多个单选元素，您可以使用另一个选择器，如下所示。 但是为您的单选元素提供name属性而不是id 。

var collapseDateRange = document.getElementsByName("radioTimeFilter");
addCollapsibleCapabilities(collapseDateRange);

上面的代码将为您提供 NodeList 数组，您可以使用 forloop 代码遍历每个单选按钮并设置click事件侦听器。