Question

我有这个代码来删除select上的表行。（Fiddle）

$('select').change(function() {
     var $this = $(this),
            list = $('table tbody tr'),
            findoption = $this.find('option:selected'),
            selected = findoption.data('hide'),
            show_hide_li = $this.find("."+selected);

        if (selected == "reset") {
            list.show();
        }
        else  {
           $('.'+selected).show();
            list.not('.'+selected).hide()
        }   

});

当我将代码移出change function并将其定义如下时，我遇到了阻止代码工作的$（this）问题。任何人都能告诉我如何在代码中有$（this）时定义一个函数吗？

var cancel = function(){
     var $this = $(this),
            list = $('table tbody tr'),
            findoption = $this.find('option:selected'),
            selected = findoption.data('hide'),
            show_hide_li = $this.find("."+selected);

        if (selected == "reset") {
            list.show();
        }
        else  {
           $('.'+selected).show();
            list.not('.'+selected).hide()
        }           
}


$('select').change(function() {
       cancel();
    });

Answer 1

我认为这就是你要做的。

function cancel(){
     var $this = $(this),
            list = $('table tbody tr'),
            findoption = $this.find('option:selected'),
            selected = findoption.data('hide'),
            show_hide_li = $this.find("."+selected);

        if (selected == "reset") {
            list.show();
        }
        else  {
           $('.'+selected).show();
            list.not('.'+selected).hide()
        }           
}


$('select').change(cancel);

Answer 2

您可以将“this”作为参数传递给函数

var cancel = function(param1){
     var $this = $(param1),
            list = $('table tbody tr'),
            findoption = $this.find('option:selected'),
            selected = findoption.data('hide'),
                show_hide_li = $this.find("."+selected);

        if (selected == "reset") {
            list.show();
        }
        else  {
           $('.'+selected).show();
            list.not('.'+selected).hide()
        }           
}


$('select').change(function() {
       cancel(this);
});

Answer 3

使用jquery的.on方法

$('select').on('change', cancel);

var cancel = function(){
    var $this = $(this),
        list = $('table tbody tr'),
        findoption = $this.find('option:selected'),
        selected = findoption.data('hide'),
        show_hide_li = $this.find("."+selected);

        if (selected == "reset") {
            list.show();
        }
        else  {
            $('.'+selected).show();
            list.not('.'+selected).hide()
        }           
}

Answer 4

这条非常简短但功能强大的专栏应该取代之后显示的内容：

$('select').change(cancel);

将以下行替换为上述行：

$('select').change(function() {
       cancel();
});

因为这三行等同于：

$('select').change(function() {
       //you have access to 'this' here
       function() {
             //your body
       }
});

正如您所看到的，内部函数无权访问this，除非您明确地将其作为参数传递，您可以通过删除嵌套函数轻松避免这种情况。

定义函数时$（this）问题

4 个答案: