Javascript 类和 jQuery 事件监听器

Question

我正在编写一个类，需要将事件监听器附加到相应部分中的对象(本例中为 #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>

...不幸的是变量作用域不同意我的观点；无法从 $(document).ready() 中访问 this.id，因此事件监听器不会触发。我怎样才能访问它？

Answer 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>