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