Question

我正在构建一个简单的脚本。我试图不在jQuery中使用匿名函数，以保持代码清理。这是代码：

jQuery(function($) {
    'use strict';
    var Call = {
        selection: '',
        init: function() {
            this.product_opt = $('#product_opt');
            this.listenChange();
            //this.test();
        },
        listenChange: function() {
            this.product_opt.live('change', this.afterChange);
        },
        afterChange: function() {
            $("#product_opt :checked").each(function() {
                this.selection = $(this).attr('value');
                console.log( this.selection );
                this.ajax_get_cat();
            });
        },
        ajax_get_cat : function(){
            return $.ajax({
                url: 'http://localhost:8888/mydomain/wp-admin/admin-ajax.php',
                data: {
                    'action': 'show_slider_callback',
                    'selection': this.selection
                },
                success: function(data) {
                    // This outputs the result of the ajax request
                    //console.log(data);
                    console.log('returned' + data);
                },
                error: function(errorThrown) {
                    console.log(errorThrown);
                }
            });
        }
    };

    Call.init();
});

这是HTML：

<div id="product_opt">
    <input id="1" class="selector" type="radio" name="group1" value="6" />  
    <input id="1" class="selector" type="radio" name="group1" value="6" />    </div>

当我尝试使用表单时，这是在控制台中返回的错误消息：

TypeError：this.ajax_get_cat不是函数 this.ajax_get_cat（）;

Answer 1

你的问题是你在循环中使用this.ajax_get_cat，它实际上引用了选择器中返回的每个元素。

设置this.selection时你也犯了同样的错误，只需将其改为Call即可，你应该好好去。

jQuery(function($) {
    'use strict';
    var Call = {
        selection: '',
        init: function() {
            this.product_opt = $('#product_opt');
            this.listenChange();
            //this.test();
        },
        listenChange: function() {
            this.product_opt.live('change', this.afterChange);
        },
        afterChange: function() {
            $("#product_opt :checked").each(function() {
                Call.selection = $(this).attr('value');
                console.log( Call.selection );
                Call.ajax_get_cat();
            });
        },
        ajax_get_cat : function(){
            return $.ajax({
                url: 'http://localhost:8888/mydomain/wp-admin/admin-ajax.php',
                data: {
                    'action': 'show_slider_callback',
                    'selection': this.selection
                },
                success: function(data) {
                    // This outputs the result of the ajax request
                    //console.log(data);
                    console.log('returned' + data);
                },
                error: function(errorThrown) {
                    console.log(errorThrown);
                }
            });
        }
    };

    Call.init();
});

您还可以在循环之前存储对此的正确引用：

jQuery(function($) {
    'use strict';
    var Call = {
        selection: '',
        init: function() {
            this.product_opt = $('#product_opt');
            this.listenChange();
            //this.test();
        },
        listenChange: function() {
            this.product_opt.live('change', this.afterChange);
        },
        afterChange: function() {
            var _this = this;
            $("#product_opt :checked").each(function() {
                _this.selection = $(this).attr('value');
                console.log( _this.selection );
                _this.ajax_get_cat();
            });
        },
        ajax_get_cat : function(){
            return $.ajax({
                url: 'http://localhost:8888/mydomain/wp-admin/admin-ajax.php',
                data: {
                    'action': 'show_slider_callback',
                    'selection': this.selection
                },
                success: function(data) {
                    // This outputs the result of the ajax request
                    //console.log(data);
                    console.log('returned' + data);
                },
                error: function(errorThrown) {
                    console.log(errorThrown);
                }
            });
        }
    };

    Call.init();
});

Answer 2

更改以下部分

afterChange: function() {
            $("#product_opt :checked").each(function() {
                this.selection = $(this).attr('value');
                console.log( this.selection );
                this.ajax_get_cat(); // this refers to $("#product_opt :checked")
            });
        },

到

afterChange: function() {
            var self = this;
            $("#product_opt :checked").each(function() {
                this.selection = $(this).attr('value');
                console.log( this.selection );
                self.ajax_get_cat(); //self now refer to Call
            });
        },

Answer 3

在$(...).each内部回调中，this不能同时是迭代的当前元素（$(this)...）和Call对象（this.ajax_get_cat）。事实上，它是当前的对象;要访问外部this，请在开始var that = this之前使用经典each记住它。

TypeError：不是函数

3 个答案: