jQuery插件如何从插件内的函数中获取价值
Posted
技术标签:
【中文标题】jQuery插件如何从插件内的函数中获取价值【英文标题】：jQuery plugin how to get value from function within the plugin 【发布时间】：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以重新计算更改
【问题讨论】：
【参考方案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));
【讨论】：
以上是关于jQuery插件如何从插件内的函数中获取价值的主要内容，如果未能解决你的问题，请参考以下文章