0

何らかの理由で、generateTabs を呼び出すと、this.divRow1 is undefined が表示されます。ただし、基準をインスタンス化すると、未定義ではありません。

私は何を間違っていますか？

function Criteria() {
    this.divPortfolio = $("#portfolio_div");
    this.divImport = $("#lstimprt_div");
    this.rolling = $('#rolling');
    this.datePickers = $("#datepickers");
    this.dateStart = $("#datepicker");
    this.dateEnd = $("#datepicker2");
    this.btnToggle = $("#toggle");
    this.btnRun = $("#run_report");
    this.divRow1 = $("#Row1");
    this.dateChoice = $("#datechoice");
    this.minDate = $(".minDate");
}

Criteria.prototype.generateToggle = function () {
        /** Toggle button toggle elements chosen open/closed **/
        button.click(function () {
            this.divRow1.toggle("slow");
            this.divImport.toggle("slow");
            $("#mindate_div").toggle("slow");
            $("#header_row").toggle("slow");
            return false; //Stops postback
        });
    };

    /** When page loads  **/
    $(document).ready(function () {
        var controls = new Criteria();
        var mindate = controls.minDate.html();
        controls.onloadHide();
        controls.generatePicker(controls.dateStart);
        controls.generatePicker(controls.dateEnd);
        controls.generateToggle(controls.btnToggle);
    });
4

3 に答える 3

1

これは、コールバック メソッドの実行コンテキストがCriteriaオブジェクトではなく、クリックされたボタンであるためです。

これに対する 1 つの解決策は、 $.proxy()を使用してカスタム実行コンテキストを渡すことです。

button.click($.proxy(function () {
    this.divRow1.toggle("slow");
    this.divImport.toggle("slow");
    $("#mindate_div").toggle("slow");
    $("#header_row").toggle("slow");
    return false; //Stops postback
}, this));

別の解決策は、クロージャー変数を使用することです

var that = this;
button.click(function () {
    that.divRow1.toggle("slow");
    that.divImport.toggle("slow");
    $("#mindate_div").toggle("slow");
    $("#header_row").toggle("slow");
    return false; //Stops postback
});
于 2013-06-11T03:18:38.783 に答える
1 
button.click(function () {
        this.divRow1.toggle("slow");
        this.divImport.toggle("slow");
        $("#mindate_div").toggle("slow");
        $("#header_row").toggle("slow");
        return false; //Stops postback
    });

thisクリック イベント内とそれ以外ではスコープが異なります。具体的には、jQuery はこれを、イベントが発生するアイテム (この場合はボタン) にバインドします。この時点でブレークポイントを設定thisして開発コンソールで調べると、DOM 要素を参照していることがわかります。

このような自己変数を設定し、代わりにそれを参照することで、これを回避できます。

Criteria.prototype.generateToggle = function () {
    var self = this;
    /** Toggle button toggle elements chosen open/closed **/
    button.click(function () {
        self.divRow1.toggle("slow");
        self.divImport.toggle("slow");
        $("#mindate_div").toggle("slow");
        $("#header_row").toggle("slow");
        return false; //Stops postback
    });
};
于 2013-06-11T03:20:15.127 に答える
0 
Criteria.prototype.generateToggle = function () {

        var that = this; 
        /** Toggle button toggle elements chosen open/closed **/
        button.click(function () {

            that.divRow1.toggle("slow");
            that.divImport.toggle("slow");
            $("#mindate_div").toggle("slow");
            $("#header_row").toggle("slow");
            return false; //Stops postback
        });
    };

「this」コンテキストは、ボタン クリック内で変更されました。上記を試してください

于 2013-06-11T03:19:10.930 に答える