jQuery插件如何从插件中的函数获取值

Question

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

现在我正试图添加过滤器选项到插件，并坚持从一个函数获取值到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功能将ajaxdata设置为查询获得的价值PARAMS

全码

(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重新计算的变化

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

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

Answer 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));