我正在为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以重新计算更改
答案 0 :(得分：1)
可以添加一次回调，您可以在每个函数调用中添加回调。 你应该从$（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;
});
答案 1 :(得分：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;
});
}
答案 2 :(得分：0)
我已经解决了，最终的代码就在这里。以防万一有人想使用相同的。
(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));