【问题标题】：jQuery plugin how to get value from function within the pluginjQuery插件如何从插件内的函数中获取价值
【发布时间】：2016-02-01 08:05:01
【问题描述】：

我正在为mysql 结果创建一个插件，包括搜索过滤器和订单。我已经使用一些教程创建了一个插件，对于加载更多的简单查询（类似 youtube），事情进展顺利。

现在我正在尝试向插件添加过滤器选项，并坚持在更改下拉列表时从一个函数获取值到 ajax();。该函数在 pluign 函数中。

sort_order_by = function () {

    var selected_val = '';
    var orderby_val = '';

    // check for sort order
    $(settings.order_by_selector).change(function () {
        //selected_val = $('#sort_order_by option:selected').val();
        selected_val = $('option:selected', this).val();
        orderby_val = (selected_val == '' || selected_val == null) ? null : selected_val;

                console.log(orderby_val); // this gives me result on change

        return orderby_val;
    });

    return null;
},
...
load = function (start, count) {

  console.log(sort_order_by()); // this giving me null

  $.ajax({
      url: settings.source,
      type: 'get',
      dataType: 'json',
      data: {start: start, count: count, sort_order_by: sort_order_by()},
      success: function (data) {
          var items = data.items;

          if (items.length) {
              $(items).each(function (index, value) {
                  append(value);
              });

              stepped = stepped + count;
          }

          if (data.last === true) {
              finished();
          }
      }
  });

};

如何从sort_order_by 函数获取值到ajax data 以设置为查询参数

完整代码

(function ($) {
    'use strict';

    $.fn.loadmore = function (options) {
        var self = this,

            settings = $.extend({
                source: '',
                step: 2,
                order_by_selector: '#sort_order_by'
            }, options),

            stepped = 1,
            item = self.find('.item'),
            items = self.find('.items'),

            sort_order_by = function () {

                var selected_val = '';
                var orderby_val = '';
                // check for sort order
                $(settings.order_by_selector).change(function () {
                    //selected_val = $('#sort_order_by option:selected').val();
                    selected_val = $('option:selected', this);
                    orderby_val = (selected_val == '' || selected_val == null) ? null : selected_val;

                    console.log(orderby_val);
                });

                return orderby_val;
            },

            finished = function () {
                self.find('.items-load').remove();
            },

            append = function (value) {
                var name, part;

                item.remove();

                for (name in value) {
                    if (value.hasOwnProperty(name)) {
                        part = item.find('*[data-field="' + name + '"]');

                        if (part.length) {
                            part.text(value[name]);
                        }
                    }
                }

                item.clone().appendTo(items);
            },

            load = function (start, count) {

                $.ajax({
                    url: settings.source,
                    type: 'get',
                    dataType: 'json',
                    data: {start: start, count: count, sort_order_by: sort_order_by()},
                    success: function (data) {
                        var items = data.items;

                        if (items.length) {
                            $(items).each(function (index, value) {
                                append(value);
                            });

                            stepped = stepped + count;
                        }

                        if (data.last === true) {
                            finished();
                        }
                    }
                });

            };

        if (settings.source.length) {

            self.find('.items-load').on('click', function () {
                load(stepped, settings.step);
                return false;
            });

            load(1, settings.step);
        } else {
            console.log('Source is require');
        }

    }
}(jQuery));

有关工作代码，请参阅下面的答案或click here

概述：我已将 stepped 值重置为 1 以重新计算更改

【问题讨论】：

标签： jquery ajax jquery-plugins

【解决方案1】：

我想你误解了这个jQuery函数.change()的使用

看这段代码：

$(settings.order_by_selector).change(function () {
    ....
    return orderby_val;
});

它的目的是为你的“order_by_selector”添加一个事件监听器，这样每次它的值改变时，它都会运行你给它的函数。

所以在您的代码中，sort_order_by 函数只是添加了一个事件侦听器，并且无论何时调用它，它都会返回 null。

我想你想在每次用户选择不同的选项时进行过滤，所以解决方案应该是这样的：

$.fn.loadmore = function (options) {
  var self = this,
  ...
      load = function (start, count, orderby_val, isRequery) {
        $.ajax({
          url: settings.source,
          type: 'get',
          dataType: 'json',
          data: {start: start, count: count, sort_order_by: orderby_val},
          success: function(data){
             if (isRequery){
                // clear old items
             }
             ...
          }
          ...
       });
     };

  $(settings.order_by_selector).change(function () {
    ...

    // Don't just return the value here, do something else, for ex call function load:
    load(start, count, orderby_val, true);

    return orderby_val;
  });
}

【讨论】：

感谢您的代码，多输出有问题。我的意思是它附加到现有结果而不是请求。请注意load = function() 之前代码上的逗号，所以我很困惑在哪里添加我的下拉代码？
就我而言，您可以在函数Load（）中添加一个新参数，指示是重新查询还是追加，如果是重新查询，请在ajax回调中调用append之前清除旧项目.而且你也不需要声明函数 sort_order_by()。我会修改我的代码。
这很有效，但仍然存在一个问题。 load more 链接的行为很奇怪。如果我加载所有项目然后进行过滤，则不会出现更多 load more 链接。知道如何解决这个问题吗？
好的，我终于解决了这个问题。也许它可能会更好。如果是这样，请告诉我
我不太明白，你能发一个jsfiddle吗？我想看看你的 HTML 结构。如果使用过滤后某些内容消失了，我猜您在尝试清除 ajax 回调中的旧项目列表时已将其删除。

【解决方案2】：

回调可以添加一次，您在每次函数调用时添加它们。您应该从 $(settings.order_by_selector).change 回调中调用 load(start,count,sort_order_by)。

$(settings.order_by_selector).change(function () {
    //selected_val = $('#sort_order_by option:selected').val();
    selected_val = $('option:selected', this).val();
    orderby_val = (selected_val == '' || selected_val == null) ? null :    selected_val;
    load(start,count,orderby_val);
            console.log(orderby_val); // this gives me result on change

    return orderby_val;
});

【讨论】：

感谢代码，但我不知道为什么，这样它不会清除输出而是附加现有查询

【解决方案3】：

我已经解决了，最终代码在这里。以防万一有人想使用它。

感谢Hp93 和Mohmoud 的帮助。我很感激它帮助我解决了这个问题。所有功劳归他们所有。

(function ($) {
    'use strict';

    $.fn.loadmore = function (options) {
        var self = this,
            orderby_val = 'userid',

            settings = $.extend({
                source: '',
                step: 2,
                order_by_selector: '#sort_order_by'
            }, options),

            stepped = 1,
            item = self.find('.item'),
            items = self.find('.items'),

            started = function () {
                self.find('.items-load').show();
            },

            finished = function () {
                self.find('.items-load').hide();
            },

            append = function (value) {
                var name, part;

                item.remove();

                for (name in value) {
                    if (value.hasOwnProperty(name)) {
                        part = item.find('*[data-field="' + name + '"]');

                        if (part.length) {
                            part.text(value[name]);
                        }
                    }
                }

                item.clone().appendTo(items);
            },

            load = function (start, count, orderby_val, isRequery) {

                $.ajax({
                    url: settings.source,
                    type: 'get',
                    dataType: 'json',
                    data: {start: start, count: count, sort_order_by: orderby_val},
                    success: function (data) {

                        if (isRequery) {
                            self.find('.item').remove();
                            stepped = 1;

                            //console.log(data.last);
                        }
                        var items = data.items;

                        if (items.length) {
                            $(items).each(function (index, value) {
                                append(value);
                            });

                            stepped = stepped + count;
                            console.log('loaded ' + stepped);
                        }

                        if (data.last === true) {
                            finished();
                        } else {
                            started();
                        }

                    }
                });

            };

        if (settings.source.length) {

            self.find('.items-load').on('click', function () {
                load(stepped, settings.step, orderby_val);
                return false;
            });

            load(1, settings.step, orderby_val);
        } else {
            console.log('Source is require');
        }

        $(settings.order_by_selector).change(function () {

            var selected_val = $('option:selected', this).val();
            var orderby_val = (selected_val == '' || selected_val == undefined) ? 'userid' : selected_val;

            load(1, settings.step, orderby_val, true);

            return orderby_val;
        });

    }
}(jQuery));

【讨论】：