【问题标题】:How to access object method within jQuery event如何在 jQuery 事件中访问对象方法
【发布时间】:2011-06-30 01:49:23
【问题描述】:

我正在尝试在 jQuery 的帮助下用 JavaScript 设计一个面向对象的应用程序。但是,在我的应用程序类中使用 jQuery 事件处理程序时遇到了问题。这是有问题的sn-p代码:

<script type="text/javascript">
function Library(s_list) {
    this.songs = s_list;
    this.song_table = $('#songs');
    this.search_input = $('#search-txt');

    this.refresh_table = function() {
        this.song_table.html('<tr id="fields"><td></td><td>Name</td><td>Artist</td><td>Album</td><td>Time</td></tr>');

        for ( index in this.songs ) {
            if ( (index % 2) == 0 ) {
                this.song_table.append('<tr class="l"><td></td><td>' + this.songs[index] + '</td><td>Artist</td><td>Album</td><td>Time</td></tr>');
            } else {
                this.song_table.append('<tr class="d"><td></td><td>' + this.songs[index] + '</td><td>Artist</td><td>Album</td><td>Time</td></tr>');
            }
        }
    }

    this.filter_songs = function(text) {
        // Not implemented
    }

    this.search_input.keyup(function() {
        var sender = $(this);
        var s = $.trim(sender.val());

        // I need to access the filter_songs method of the Library class here. Normally I would use "this" but jQuery uses it for the html object that triggered the event
    });

    this.refresh_table();
}

var library;

$(document).ready(function() {
    library = new Library(song_list);

});

</script>

问题是我需要从 jQuery search_input.keyup 事件处理程序访问 Library 类的 filter_songs 方法。通常我会使用“this”,但 jQuery 将它用于触发事件的 html 对象。我是在接近这个应用程序的设计错误,还是有办法解决这个问题?感谢您的帮助。

【问题讨论】:

    标签: javascript jquery oop


    【解决方案1】:

    你需要一个闭包。试试这个:

    var self = this;
    this.search_input.keyup(function() {
                var sender = $(this);
                var s = $.trim(sender.val());
                self.filter_songs(s);
            });
    

    【讨论】:

    • 谢谢!这正是我所需要的。这是一个显而易见的解决方案,但我想我今天的大脑不太好。
    • :) 我们会度过阴天!
    猜你喜欢
    • 2011-02-28
    • 2019-05-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-25
    • 2019-02-07
    相关资源
    最近更新 更多