Question

考虑在页面就绪时运行的代码：

$("input.extraOption[checked]").each(function() {   
        console.log($(this));
        $(this).closest('.questionRow').find('.date').attr("disabled", true);
        $(this).closest('.questionRow').find('.dateSpan').hide();
        $(this).closest('.questionRow').find('.date').val("");
        $(this).closest('.questionRow').find('.textareaResize').attr("disabled", true);
        $(this).closest('.questionRow').find('.textareaResize').val("");
        $(this).closest('.questionRow').find('.text').attr("disabled", true);
        $(this).closest('.questionRow').find('.text').val("");
        $(this).closest('.questionRow').find('.checkbox').attr("disabled", true);

    });

我想重构这些调用，因为它们也在其他地方使用，所以我创建了以下函数：

jQuery.fn.extend({
    toggleAnswers: function (disable) {
        var group = $(this);
        group.find('.date').attr("disabled", disable);
        group.find('.date').val("");
        group.find('.textareaResize').attr("disabled", disable);
        group.find('.textareaResize').val("");
        group.find('.text').attr("disabled", disable);
        group.find('.text').val("");
        group.find('.checkbox').attr("disabled", disable);
        if(checkedStatus === true){
            group.find('.dateSpan').hide();
        }else{
            group.find('.dateSpan').show();
        }
    return group;
    }
});

然后我继续使用：

更改8 $（this）.closest（...）调用

$(this).closest('.questionRow').toggleAnswers(true);

问题出现了：在一个包含5个与选择器匹配的元素的页面上，只有第一个元素受到更改（换句话说，我只得到一个console.log）！在重构之前，我得到了所有5个元素的预期变化。

在这个重构中做错了什么？

Answer 1

checkStatus未在任何地方定义，导致异常。您似乎想要使用disable。

另外，this已经引用了调用此方法的jQuery集合，因此将this包装在jQuery对象（$(this)）中是多余/不必要的。请注意，这特别是在$.fn方法内部，而不是普通的jQuery方法。例如，在内部事件处理程序中，this引用DOM元素，因此您需要将其包装在$(this)中以便在其上调用jQuery方法。

此外，禁用元素应使用.prop("disabled", true/false)：.prop() vs .attr()

您还可以组合使用相同jQuery方法的任何选择器。例如，group.find('.date').val("");和group.find('.text').val("");可以合并为：group.find(".date, .text").val("");

将所有这些建议放在一起，以及迭代this（为了保持一致性和可扩展性），这就是我使用的内容：

jQuery.fn.extend({
    toggleAnswers: function (disable) {
        return this.each(function (idx, el) {
            var $group = $(el);
            $group.find(".date, .text, .textareaResize, .checkbox").prop("disabled", disable);
            $group.find(".date, .textareaResize, .text").val("");
            $group.find(".dateSpan").toggle(!disable);
        });
    }
});

根据您的使用方式，我会将其设置为：

var targets = $("input.extraOption[checked]"),
    toggler = function () {
        $(this).closest(".questionRow").toggleAnswers(this.checked);
    };

targets.each(toggler).on("click", toggler);

DEMO： http://jsfiddle.net/XdNDA/

使用自定义功能时，每个功能都无法正常工作

1 个答案: