jQuery插件如何在插件中获得价值的功能 [英] jQuery plugin how to get value from function within the plugin
问题描述
我creting一个插件的mysql 的结果，包括搜索过滤器和命令。我已经使用了一些教程，创造了一个插件，事情会罚款，简单的查询负载更多（的YouTube等）。
现在我想添加过滤器选项的插件，并坚持从一个功能到阿贾克斯（获取值）; 上的变化下拉。该函数是pluign函数内
sort_order_by =功能（）{
VAR selected_val ='';
VAR orderby_val ='';
//检查排序顺序
$（settings.order_by_selector）.change（函数（）{
// selected_val = $（'＃sort_order_by选项：选择）。VAL（）;
selected_val = $（'选项：选择，这一点）.VAL（）;
orderby_val =（selected_val ==''|| selected_val == NULL）？空：selected_val;
执行console.log（orderby_val）; //这给我造成的变化
返回orderby_val;
}）;
返回null;
}，
...
负载=功能（开始，计数）{
的console.log（sort_order_by（））; //这个给我空
$阿贾克斯（{
网址：settings.source，
输入：'得到'，
数据类型：JSON，
数据：{开始：开始，计数：计数，sort_order_by：sort_order_by（）}，
成功：功能（数据）{
VAR项目= data.items;
如果（items.length）{
$（项目）。每个（函数（指数值）{
追加（值）;
}）;
加强=加强+计数;
}
如果（data.last ===真）{
成品（）;
}
}
}）;
};
我怎样才能从 sort_order_by 函数的 AJAX 数据值设置为一个查询参数
全部code
（功能（$）{
使用严格的;
$ .fn.loadmore =功能（选件）{
无功自我=这一点，
设置= $ .extend（{
资源： ''，
步骤：2，
order_by_selector：#sort_order_by
}，期权）
台阶= 1，
项目= self.find（'项目'），
项目= self.find（'项目'），
sort_order_by =功能（）{
VAR selected_val ='';
VAR orderby_val ='';
//检查排序顺序
$（settings.order_by_selector）.change（函数（）{
// selected_val = $（'＃sort_order_by选项：选择）。VAL（）;
selected_val = $（'选项：选择，这一点）;
orderby_val =（selected_val ==''|| selected_val == NULL）？空：selected_val;
执行console.log（orderby_val）;
}）;
返回orderby_val;
}，
成品=功能（）{
。self.find（'。项目负荷）删除（）;
}，
追加=函数（值）{
变种的名称，部位;
item.remove（）;
为（在数值名称）{
如果（value.hasOwnProperty（名））{
部分= item.find（'* [数据字段=+名字+']'）;
如果（part.length）{
part.text（值[名]）;
}
}
}
item.clone（）appendTo（项目）。
}，
负载=功能（开始，计数）{
$阿贾克斯（{
网址：settings.source，
输入：'得到'，
数据类型：JSON，
数据：{开始：开始，计数：计数，sort_order_by：sort_order_by（）}，
成功：功能（数据）{
VAR项目= data.items;
如果（items.length）{
$（项目）。每个（函数（指数值）{
追加（值）;
}）;
加强=加强+计数;
}
如果（data.last ===真）{
成品（）;
}
}
}）;
};
如果（settings.source.length）{
self.find（'。项目负荷）。在（'点击'，函数（）{
负载（阶梯，settings.step）;
返回false;
}）;
负载（1，settings.step）;
} 其他 {
的console.log（源是需要'）;
}
}
}（jQuery的））;
有关工作的code看到我的回答如下，或点击此处
概述：我已经复位
阶梯值1来重新计算改变
我想你是误会使用此jQuery函数.change的（）
看着这个code：
$（settings.order_by_selector）.change（函数（）{
....
返回orderby_val;
}）;
其目的是将事件侦听器添加到您的order_by_selector让每一次它的价值变化，它将运行函数f，你给它。
因此，在您code时，sort_order_by功能，只需添加一个事件侦听器，当你调用它，它只是返回null。
我想你要过滤每当用户选择不同的选项，因此该解决方案应该是这样的：
$。fn.loadmore =功能（选件）{
无功自我=这一点，
...
负载=功能（开始，计数，orderby_val，isRequery）{
$阿贾克斯（{
网址：settings.source，
输入：'得到'，
数据类型：JSON，
数据：{开始：开始，计数：计数，sort_order_by：orderby_val}，
成功：功能（数据）{
如果（isRequery）{
//清除旧项目
}
...
}
...
}）;
};
$（settings.order_by_selector）.change（函数（）{
...
//不要只是返回值在这里，做别的事情，为前通话功能的负载：
负载（启动，计数，orderby_val，真正的）;
返回orderby_val;
}）;
}
I am creting a plugin for mysql result including search filters and orders. I have created a plugin using some of tutorials and things are going fine for simple query with load more (youtube like).
Now I am trying to add filter options to the plugin and stuck with getting value from the one function to the ajax(); on change the dropdown. The function is within the pluign function.
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();
}
}
});
};
How I can get the value from the sort_order_by function to the ajax data to set as a query params
Full Code
(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));
For working code see my answer below or click here
Overview: I have reset
steppedvalue to1to recalculate on change
I think you are misunderstanding the use of this jQuery function .change()
Looking at this code:
$(settings.order_by_selector).change(function () {
....
return orderby_val;
});
Its purpose is to add an event listener to your "order_by_selector" so that every time its value change, it will run the function f you give it.
So in your code, the sort_order_by function just add an event listener, and whenever you call it, it just return null.
I suppose you want to filter every time user select a different option, so the solution should be something like this:
$.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;
});
}
这篇关于jQuery插件如何在插件中获得价值的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
