Question

我有一组复选框，我想为他们创建一个自定义方法，具体取决于他们拥有哪个类。

var checkboxs = $("input[type=checkbox]");
    checkboxs.each(function(){
        if($(this).hasClass("class1")){
            $(this).method1 = function(){
                $(this).removeAttr("checked");
                return $(this);
            }
        }
        if($(this).hasClass("class2")){
            $(this).method1 = function(){
                $(this).parents("tr").next().hide();
                $(this).removeAttr("checked");
                return $(this);
            }
        }
    });

然后，如果，我想这样做：

checkboxs.each(function(){
        $(this).method1();
    });

它告诉我没有method1方法。为什么不起作用？

Answer 1

问题是$(this)使用this变量创建了一个新的jQuery对象。每次调用$(this)时都会执行此操作，因此在一个地方向$(this)添加方法不会使该方法在后续$(this)调用中保持最后。

此jsFiddle显示问题http://jsfiddle.net/92cub/1/

编辑：我的功能可能因每个元素而异，我已经改变了给定的代码，而不是在jQuery中使用data函数。你也反复做$(this)所以我删除了它。电话$(this)非常沉重，一遍又一遍。

相反，你可以这样做：

var checkboxs = $("input[type=checkbox]");
    checkboxs.each(function(){
      var $this = $(this);  

      if($this.hasClass("class1")){
           $this.data("func", function (){
                $this.removeAttr("checked");
                return $this;
            });
        }
        if($this.hasClass("class2")){
            $this.data("func", function(){
                $this.parents("tr").next().hide();
                $this.removeAttr("checked");
                return $this;
            });
        }
    });

要调用该函数，请使用：

checkboxs.each(function(){
    $(this).data("func").apply();      
});

Answer 2

你不能只将这样的属性分配给jQuery对象，因为它只是元素的包装器，每次都会重新创建。

如果要将属性附加到元素，请使用data() method。我不确定这是否适用于功能，但它值得一试。

在你的情况下，我怀疑我们有一点XY problem。我只想检查回调中对象的类。

这可能是一个例子：

method1 = function() {
    if($(this).hasClass("class2")) {
        $(this).parents("tr").next().hide();
    }
    $(this).removeAttr("checked");
    return $(this);
}

checkboxs.each(function(){
    method1();
});

根据您的使用情况，它也可能只是调用每个（）选择，这可能看起来像只是运行它而不是最后一点代码：

$('input[type=checkbox].class1').each(function(){
    $(this).method1 = function(){
        $(this).removeAttr("checked");
        return $(this);
    }
});
$('input[type=checkbox].class2').each(function(){
    $(this).method1 = function(){
        $(this).parents("tr").next().hide();
        $(this).removeAttr("checked");
        return $(this);
    }
});

如果没有一些实际的代码和背景，我们无法真正告诉你如何最好地做你想做的事。

Answer 3

或者你可以编写一个扩展jquery原型的常用函数。

$.fn.method1 = function(){
    if(!this.is(':checkbox')) return this; //If it is called on a non check box just do nothing
    if(!this.is('.class1, .class2')) return this; //if this is not of targetted classes return

    if(this.is('.class2')){ //if class2 hide the next of its closest tr which comes up in its parent hierarchy.
        this.closest('tr').next().hide();  //using closest assuming you want to check only its immediate tr in its parent hierarchy
    }
    this.prop("checked", false); //uncheck it if it is class 1 or 2
    return this;
}

<强> Demo

这样您就可以将此功能扩展到任何其他元素。
您可以通过设置选项进行自定义（例如：指定类回调等）

使用以下内容，您可以避免在源处进行迭代：

方法：

$.fn.method1 = function () {
    this.each(function(){
        var $this = $(this);
        if (!$this.is(':checkbox')) return true;
        if (!$this.is('.class1, .class2')) return true;
        if ($this.is('.class2')) {
            $this.next().css('color', 'red');
        }
        $this.prop("checked", false);
    });
    return this;
}

用法：

$("input[type=checkbox]").method1();

<强> Demo

jquery每次在迭代中添加自定义方法

3 个答案: