javascript - jQuery 查找具有特定类型的下一个元素的元素

Question

我有包含不同输入元素的“组件”。这些组件有一个复选框，允许用户在元素上切换启用/禁用。这是当前禁用输入和选择的代码。

 $(".activeComponentToggle input:checkbox").on("change", function () {
                if ($(this).is(':checked')) {
                    $(this).closest("div.component").addClass("activeComponentWell");
                    $(this).closest("div.component").removeClass("inactiveComponentWell");
                    $(this).closest("div.component").find("input.form-control").prop('disabled', false);
                    $(this).closest("div.component").find("select.form-control").prop('disabled', false);
                } else {
                    $(this).closest("div.component").addClass("inactiveComponentWell");
                    $(this).closest("div.component").removeClass("activeComponentWell");
                    $(this).closest("div.component").find("input.form-control").prop('disabled', true);
                    $(this).closest("div.component").find("select.form-control").prop('disabled', true);
                }
            });

现在我也有了这种HTML元素

<div class="input-group date" id="datetimepickerRanged11">
<input type="text" id="datepickerRanged811" class="form-control">
<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div>

要禁用此元素，我需要取消绑定(bind)跨度的单击 unbind("click");

我该怎么做？如果输入的 next() 元素是一个跨度，我需要取消绑定(bind)它。

Answer 1

首先，您可以通过缓存选择器来干燥代码。其次，我不会取消跨度的单击处理程序的绑定(bind)，因为当您需要重新附加它时，这会让您很痛苦。相反，我会使用 data 属性来指示 span 点击是否被阻止。像这样的事情:

$(".activeComponentToggle input:checkbox").on("change", function () {
    var $component = $(this).closest("div.component");
    if ($(this).is(':checked')) {
        $component
            .addClass("activeComponentWell")    
            .removeClass("inactiveComponentWell");
            .find("input.form-control").prop('disabled', false).end()
            .find("select.form-control").prop('disabled', false).end()
            .find('span.input-group-addon').data('disabled', false)
    }
    else {
        $component
            .addClass("inactiveComponentWell")
            .removeClass("activeComponentWell")
            .find("input.form-control").prop('disabled', true).end()
            .find("select.form-control").prop('disabled', true).end()
            .find('span.input-group-addon').data('disabled', true)

    }
});

然后在 span 点击处理程序中:

$('span.input-group-addon').click(function() {
    if (!$(this).data('disabled')) {
        // do something
    }
});