Javascript и JQuery "эта" область действия ошибки - PullRequest
Новая
       12

Javascript и JQuery "эта" область действия ошибки

1 голос
/ 23 сентября 2010

Пример кода: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<div id="myinfo">info</div>
<input id="clickme" type="button" value="click here to display info"/>

<script type="text/javascript">
    function Fighter() {
        this.name = "Kenny";    // fighters name
        this.hp = 10;           // fighters hp
        this.getHP = function() {
            return this.hp;
        }

        this.getName = function() {
            return this.name;
        }

        this.initUpdateButton = function(button_id) {
            $(button_id).click(function() {
                $("#myinfo").html("Name: "+this.getName()+"<br/>HP:"+this.getHP()); 
                // this.getName is undefined
            });
        }

    };

    var me = new Fighter();
    alert("Name: "+me.getName()+"<br/>HP:"+me.getHP()); // works properly
    me.initUpdateButton("#clickme"); // bind it to some ID
</script>

Проще говоря, учитывая класс JavaScript со смешанным JQuery, я понимаю, что при обратном вызове для функций JQuery (то есть $.click()), что this ссылается на объект, по которому щелкнули, а Не Класс или корневая функция (). поэтому this.getName() и this.getHP() не работают.

Но как лучше обойти эту проблему?

Я видел несколько похожих постов, но они мне не пригодились, извините, если это репост, и заранее спасибо.

1 Ответ

2 голосов
/ 23 сентября 2010 
this.initUpdateButton = function(button_id) {
            var self = this;
            $(button_id).click(function() {
                $("#myinfo").html("Name: "+self.getName()+"<br/>HP:"+self.getHP()); 
            });
        }
...