函数内的排序脚本无法正常工作
Sorting script inside function doesn't work correctly
我正在尝试将脚本转换为函数,因为一遍又一遍地重复相同的代码非常烦人。
脚本选择一个容器,该容器将很快容纳一个新的手风琴.容器中的每个手风琴都有一个唯一的数据排序 ID。(它需要从 1 到 10 排序(然后,它会检测是否有任何 id 小于或大于它的手风琴,并将自身添加到它们之间。
脚本无需在函数内即可正常工作。
此没有函数的脚本可以正常工作
var $container = $('.panel-group[data-group-holder="' + dataPlace + '"]'),
$d = $container.find('div.panel-default'),
$n = $('<div class="panel panel-default dragged-true" data-sort="' + dataSort + '"><div class="panel-heading"><h4 class="panel-title"><a class="accordion-toggle sub" data-sort="' + dataSort + '" data-toggle="collapse" href="#main-' + dataSort + '"><div class="remove set"><i class="icon-remove"></i></div>' + dataHtml + ' <b>(<span class="sub-count">0</span>)</b><i class="icon-angle-down"></i></a></h4></div><div id="main-' + dataSort + '" class="panel-collapse in"><div class="panel-body" data-accept="' + dataSort + '"></div></div></div>');
var $a = $d.filter(function () {
return $(this).data('sort') < dataSort;
}).last();
$(that).parents('div:eq(0)').remove();
/*alert($('.draggable-groups .main-groups[data-sort="' + dataSort + '"]').parents().html());*/
if ($a.length) $a.after($n);
else $container.prepend($n);
此函数无法正常工作(不排序(
function placeSort(thisContainer, containerFind, placeHtml, returnCompareOneFind, returnCompareOne, returnCompareTwo, removeClone) {
var $container = $(thisContainer),
$d = $container.find(containerFind),
$n = $(placeHtml);
if(returnCompareOneFind == "false") {
var $a = $d.filter(function () {
return $(this).data(returnCompareOne) < returnCompareTwo;
}).last();
} else {
var $a = $d.filter(function () {
return $(this).find(returnCompareOneFind).data(returnCompareOne) < returnCompareTwo;
}).last();
}
removeClone;
if ($a.length) $a.after($n);
else $container.prepend($n);
}
function addGroupAccordion(that, dataSort, dataPlace, dataHtml) {
var thisContainer = '.panel-group[data-group-holder="' + dataPlace + '"]';
var containerFind = 'div.panel-default';
var placeHtml = '<div class="panel panel-default dragged-true" data-sort="' + dataSort + '"><div class="panel-heading"><h4 class="panel-title"><a class="accordion-toggle sub" data-sort="' + dataSort + '" data-toggle="collapse" href="#main-' + dataSort + '"><div class="remove set"><i class="icon-remove"></i></div>' + dataHtml + ' <b>(<span class="sub-count">0</span>)</b><i class="icon-angle-down"></i></a></h4></div><div id="main-' + dataSort + '" class="panel-collapse in"><div class="panel-body" data-accept="' + dataSort + '"></div></div></div>';
var returnCompareOneFind = "false";
var returnCompareOne = 'sort';
var returnCompareTwo = dataSort;
var removeClone = $(that).parents('div:eq(0)').remove();
placeSort(thisContainer, containerFind, placeHtml, returnCompareOne, returnCompareTwo, removeClone);
}
$(document).on('click','.draggable-groups .main-groups',function(){
var dataSort = $(this).attr("data-sort");
var dataPlace = $(this).parents('div:eq(1)').attr("data-group");
var dataHtml = $(this).html();
var that = $(this);
addGroupAccordion(that, dataSort, dataPlace, dataHtml);
var groupHolder = dataPlace;
countChildren(groupHolder);
});
.HTML
<div class="panel panel-default">
<div class="panel-heading main">
<h4 class="panel-title">
<a class="accordion-toggle collapsed main side-js" data-parent="#main-panel" data-panel="00" data-toggle="collapse" href="#panel-00">
<span>0</span>Tellija kulud
<b>(<span class="cat-count">0</span>)</b>
<i class="icon-angle-down"></i>
</a>
</h4>
</div>
<div id="panel-00" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-group" data-group-holder="00">
</div>
</div>
</div>
</div>
<h3>Main groups</h3>
<div class="row draggable-groups" data-group="00">
<div class="col-md-6">
<div class="main-groups" data-sort="01">01</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="02">02</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="03">03</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="04">04</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="05">05</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="06">06</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="07">07</div>
</div>
<div class="col-md-6">
<div class="main-groups" data-sort="08">08</div>
</div>
</div>
创建一个 jsFiddle 会花费太多时间重新创建它。很抱歉缺少它。
您的问题可能归结为尝试传递this
试一试:
function addGroupAccordion(self, dataSort, dataPlace, dataHtml) {
...
var removeClone = $(self).parents('div:eq(0)').remove();
...
}
$(document).on('click','.draggable-groups .main-groups',function(){
...
var self = this; // 'self' is more standardized
addGroupAccordion(self, dataSort, dataPlace, dataHtml);
...
});
这里发生的事情是,当您在$().on
函数中设置var that = $(this);
时,您正在存储包含this
的jQuery对象,然后当您尝试使用$(that)
在addGroupAccordion
函数中使用它时,您要求jQuery执行:$($(this))
。
相关文章:
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- javascript扫雷器floodfill算法不能正常工作