javascript - 如何向单选按钮添加事件监听器 - 地雷不发射

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

您期望 crashDateRange 为数组，但在使用 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 事件监听器。