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>

......遗憾的是，变量范围与我不一致;无法从this.id内访问$(document).ready()，因此事件侦听器不会触发。我该如何访问它？

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>

Answer 2

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

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

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

    });
}

Answer 3

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

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"); });

    });

}

Javascript类和jQuery事件监听器

3 个答案: