Question

我有一个像这样的jQuery函数过滤标签：

$.filtrele = function(e) {
    var value = $(e).val().toLowerCase();
    var li = $("#dgg > label");
    li.hide();
    li.filter(function() {return $(this).text().toLowerCase().indexOf(value) > -1;}).show();
}

我这样用：

$('#filt').keyup(function() {
    $.filtrele(this);
});

我想将这些结合起来并使用如下：$('#filt').filtrele();我尝试了一些像这样的组合：

$.fn.filtrele= function(){
    $(this).keyup(function()
    {
        var value = $(this).val().toLowerCase();
        var li = $("#dgg > label");
        li.hide();
        li.filter(function() {return $(this).text().toLowerCase().indexOf(value) > -1;}).show();
    });
};

但我没有管理它。

Answer 1

尝试将$(this).keyup(function()更改为this.keyup(function()每https://learn.jquery.com/plugins/basic-plugin-creation/

$.fn.filtrele= function(){
    this.keyup(function()
    {
        var value = $(this).val().toLowerCase();
        var li = $("#dgg > label");
        li.hide();
        li.filter(function() {return $(this).text().toLowerCase().indexOf(value) > -1;}).show();
    });
};

Answer 2

你必须像这样调用this.keyup not $(this).keyup，“这是因为我们的filtrele函数是与.keyup（）相同的对象的一部分。”

$.fn.filtrele= function(){
    this.keyup(function()
    {
        var value = $(this).val().toLowerCase();
        alert(value);
        var li = $("#dgg > label");
        li.hide();
        li.filter(function() {return $(this).text().toLowerCase().indexOf(value) > -1;}).show();
    });
};

$('#filt').filtrele();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="filt" />

创建包含keyup函数的jQuery插件

2 个答案: