Javascript 类和 jQuery 事件监听器答案

【问题标题】：Javascript classes and jQuery event listenersJavascript 类和 jQuery 事件监听器
【发布时间】：2009-12-25 14:21:08
【问题描述】：

我正在编写一个类，它需要将事件侦听器附加到各个部分中的对象（本示例中为 #one 和 #two），但我在从类传递变量以设置 jQuery 事件侦听器时遇到问题.

<script type="text/javascript">

    function myClass(id) {

        this.id = id;

        $(document).ready(function(){

            $(this.id + ' .filter').click(function(){ alert("You clicked a filter"); });

        });

    }

    one     = new myClass('#one');
    two     = new myClass('#two');

</script>

<div id="one">
    <a href="javascript://" class="filter">I am link one</a>
</div>

<div id="two">
    <a href="javascript://" class="filter">I am link two</a>
</div>

...不幸的是，变量范围不同意我的看法； this.id 不能从 $(document).ready() 中访问，因此事件侦听器不会触发。如何访问它？

【问题讨论】：

标签： javascript jquery scope

【解决方案1】：

这是因为“this”是一个关键字，它引用了调用当前函数的对象。对于 jQuery 事件处理程序，此对象是注册事件处理程序的 DOM 元素（即在本例中为文档。）使用不同的变量名称来存储您的对象：

<script type="text/javascript">
    function myClass(id) {
            var me = this;
            this.id = id;

            $(document).ready(function(){
                    $(me.id + ' .filter').click(function(){ alert("You clicked a filter"); });
            });
    }
    one             = new myClass('#one');
    two             = new myClass('#two');
</script>

【讨论】：

【解决方案2】：

您需要制作this 的local 副本才能在内部函数中使用它：

function myClass(id) { 
    this.id = id;
    var that = this;
    $(document).ready(function(){

        $(that.id + ' .filter').click(function(){ alert("You clicked a filter"); });

    });
}

【讨论】：

【解决方案3】：

在这种情况下，您根本不需要在另一个变量中声明它，只需在您的 document.ready 函数中将 id 替换为 this.id：

function myClass(id) {
    $(document).ready(function(){
        $(id + ' .filter').click(function(){ alert("You clicked a filter"); });
    });
}

但是，如果您对其进行了一些处理，您总是可以在另一个变量中为 this 别名：

function myClass(id) {
    var base = this;
    base.id = id;
    // Other items set on base.value

    $(document).ready(function(){

        $(base.id + ' .filter').click(function(){ alert("You clicked a filter"); });

    });

}

【讨论】：