Javascript排序函数是';他不能正常工作
我正在做一项调查,发送给客户。其中一个问题要求客户将其偏好从1到7进行排序。我已经完成了html,这就是它看起来的样子Javascript排序函数是';他不能正常工作,javascript,jquery,Javascript,Jquery,我正在做一项调查,发送给客户。其中一个问题要求客户将其偏好从1到7进行排序。我已经完成了html,这就是它看起来的样子 <div class="row"> <!--begin--> <div class="q1 col-xs-offset-3 col-xs-10"> <p class="question">2) What benefits are most important to you?
<div class="row">
<!--begin-->
<div class="q1 col-xs-offset-3 col-xs-10">
<p class="question">2) What benefits are most important to you? (Please rank 1-7)</p>
<ol>
<li id="q2-node-1" class="selection"><b>Option 1</b>
<input type="hidden" value="Option 1" name="q2">
<span class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Move To <i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li><a href="#1" data-to="1" data-move="#q2-node-1">Priority 1</a></li>
<li><a href="#2" data-to="2" data-move="#q2-node-1">Priority 2</a></li>
<li><a href="#3" data-to="3" data-move="#q2-node-1">Priority 3</a></li>
<li><a href="#4" data-to="4" data-move="#q2-node-1">Priority 4</a></li>
<li><a href="#5" data-to="5" data-move="#q2-node-1">Priority 5</a></li>
<li><a href="#6" data-to="6" data-move="#q2-node-1">Priority 6</a></li>
<li><a href="#7" data-to="7" data-move="#q2-node-1">Priority 7</a></li>
</ul>
</span>
</li>
<li id="q2-node-2" class="selection"><b>Option 2</b>
<input type="hidden" value="Option 2" name="q2">
<span class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Move To <i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li><a href="#1" data-to="1" data-move="#q2-node-2">Priority 1</a></li>
<li><a href="#2" data-to="2" data-move="#q2-node-2">Priority 2</a></li>
<li><a href="#3" data-to="3" data-move="#q2-node-2">Priority 3</a></li>
<li><a href="#4" data-to="4" data-move="#q2-node-2">Priority 4</a></li>
<li><a href="#5" data-to="5" data-move="#q2-node-2">Priority 5</a></li>
<li><a href="#6" data-to="6" data-move="#q2-node-2">Priority 6</a></li>
<li><a href="#7" data-to="7" data-move="#q2-node-2">Priority 7</a></li>
</ul>
</span>
</li>
<li id="q2-node-3" class="selection"><b>Option 3</b>
<input type="hidden" value="Option 3" name="q2">
<span class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Move To <i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li><a href="#1" data-to="1" data-move="#q2-node-3">Priority 1</a></li>
<li><a href="#2" data-to="2" data-move="#q2-node-3">Priority 2</a></li>
<li><a href="#3" data-to="3" data-move="#q2-node-3">Priority 3</a></li>
<li><a href="#4" data-to="4" data-move="#q2-node-3">Priority 4</a></li>
<li><a href="#5" data-to="5" data-move="#q2-node-3">Priority 5</a></li>
<li><a href="#6" data-to="6" data-move="#q2-node-3">Priority 6</a></li>
<li><a href="#7" data-to="7" data-move="#q2-node-3">Priority 7</a></li>
</ul>
</span>
</li>
<li id="q2-node-4" class="selection"><b>Option 4</b>
<input type="hidden" value="Option 4" name="q2">
<span class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Move To <i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li><a href="#1" data-to="1" data-move="#q2-node-4">Priority 1</a></li>
<li><a href="#2" data-to="2" data-move="#q2-node-4">Priority 2</a></li>
<li><a href="#3" data-to="3" data-move="#q2-node-4">Priority 3</a></li>
<li><a href="#4" data-to="4" data-move="#q2-node-4">Priority 4</a></li>
<li><a href="#5" data-to="5" data-move="#q2-node-4">Priority 5</a></li>
<li><a href="#6" data-to="6" data-move="#q2-node-4">Priority 6</a></li>
<li><a href="#7" data-to="7" data-move="#q2-node-4">Priority 7</a></li>
</ul>
</span>
</li>
<li id="q2-node-5" class="selection"><b>Option 5</b>
<input type="hidden" value="Option 5" name="q2">
<span class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Move To <i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li><a href="#1" data-to="1" data-move="#q2-node-5">Priority 1</a></li>
<li><a href="#2" data-to="2" data-move="#q2-node-5">Priority 2</a></li>
<li><a href="#3" data-to="3" data-move="#q2-node-5">Priority 3</a></li>
<li><a href="#4" data-to="4" data-move="#q2-node-5">Priority 4</a></li>
<li><a href="#5" data-to="5" data-move="#q2-node-5">Priority 5</a></li>
<li><a href="#6" data-to="6" data-move="#q2-node-5">Priority 6</a></li>
<li><a href="#7" data-to="7" data-move="#q2-node-5">Priority 7</a></li>
</ul>
</span>
</li>
<li id="q2-node-6" class="selection"><b>Option 6</b>
<input type="hidden" value="Option 6" name="q2">
<span class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Move To <i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li><a href="#1" data-to="1" data-move="#q2-node-6">Priority 1</a></li>
<li><a href="#2" data-to="2" data-move="#q2-node-6">Priority 2</a></li>
<li><a href="#3" data-to="3" data-move="#q2-node-6">Priority 3</a></li>
<li><a href="#4" data-to="4" data-move="#q2-node-6">Priority 4</a></li>
<li><a href="#5" data-to="5" data-move="#q2-node-6">Priority 5</a></li>
<li><a href="#6" data-to="6" data-move="#q2-node-6">Priority 6</a></li>
<li><a href="#7" data-to="7" data-move="#q2-node-6">Priority 7</a></li>
</ul>
</span>
</li>
<li id="q2-node-7" class="selection"><b>Option 7</b>
<input type="hidden" value="Option 7" name="q2">
<span class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Move To <i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li><a href="#1" data-to="1" data-move="#q2-node-7">Priority 1</a></li>
<li><a href="#2" data-to="2" data-move="#q2-node-7">Priority 2</a></li>
<li><a href="#3" data-to="3" data-move="#q2-node-7">Priority 3</a></li>
<li><a href="#4" data-to="4" data-move="#q2-node-7">Priority 4</a></li>
<li><a href="#5" data-to="5" data-move="#q2-node-7">Priority 5</a></li>
<li><a href="#6" data-to="6" data-move="#q2-node-7">Priority 6</a></li>
<li><a href="#7" data-to="7" data-move="#q2-node-7">Priority 7</a></li>
</ul>
</span>
</li>
</ol>
</div>
</div>
2)什么好处对您最重要?(请排名1-7)
选项1
选项2
选项3
选项4
选项5
选项6
选项7
这个问题的想法是,左侧将显示供它们排序的选项。右侧将显示一个下拉链接,其中列出了优先级1-7。客户将选择他们希望该选项出现在的位置,并且该选项将移动到该位置。我正在使用Javascript来完成这项工作。我有它的大部分工作,这是代码
$(function () {
// helper function to change jQuery's array data to something uniform.
function formToJSON(data) {
var index = {};
$.map(data, function (n, i) {
if (!index.hasOwnProperty(n['name'])) index[n['name']] = [];
index[n['name']].push(n["value"])
});
return index
}
$("[data-move]").bind("click tap", function (e) {
e.preventDefault(); // stop <a> from changing the page
var $tar = $($(this).data("move")); // moving this <li>
var $position = parseInt($(this).data("to")); // position to move to;
var list = $tar.parent("ol").children("li"); // all <li> in parent <ol>
var $subject = list[$position-1]; // the <li> we are placing it above
$tar.fadeOut(600, function(){
if ($position >= list.length) {
// there is nothing to insert before so
// insert at the bottom of the list
$tar.insertAfter(list[list.length-1]);
}
$tar.insertBefore($subject) // insert this <li> before the position
$tar.fadeIn(1000);
});
});
// catch form submit to show serialization of sort order
$("form").bind("submit", function (e) {
e.preventDefault(); // stop <form> from submitting
var data = $(this).serializeArray(); // get form data as an array
console.log("submitting", formToJSON(data))
});
$(函数(){
//helper函数将jQuery的数组数据更改为统一的数据。
函数formToJSON(数据){
var指数={};
$.map(数据,函数(n,i){
如果(!index.hasOwnProperty(n['name'])索引[n['name']]=[];
索引[n['name']]。推送(n[“value”])
});
回报指数
}
$(“[数据移动]”)。绑定(“点击”,函数(e){
e、 preventDefault();//停止更改页面
var$tar=$($(this.data(“move”);//移动此
var$position=parseInt($(this).data(“to”);//要移动到的位置;
var list=$tar.parent(“ol”).children(“li”);//parent中的所有
var$subject=list[$position-1];//我们把它放在上面的
$tar.fadeOut(600,函数(){
如果($position>=list.length){
//在此之前,没有什么可插入的
//在列表底部插入
$tar.insertAfter(列表[list.length-1]);
}
$tar.insertBefore($subject)//在位置前插入此
$tar.fadeIn(1000);
});
});
//捕获表单提交以显示排序顺序的序列化
$(“表格”).bind(“提交”,函数(e){
e、 preventDefault();//停止提交
var data=$(this).serializeArray();//将表单数据作为数组获取
log(“提交”,formToJSON(数据))
});
这在很大程度上是有效的。我遇到的问题是,当我选择优先级3时,例如在其中任何一个选项上,它会移到选项2而不是选项3。除1和7之外,所有选项都会这样做。如果选择优先级1,它会按预期移到选项1。同样,如果选择优先级7,它会按原样移到选项7本应如此。但所有其他选项移到实际应移到的选项之前。因为您使用的是
insertbefore
当您按“优先级3”时,它会将其插入列表中第三个索引之前。
基本上,当按优先级向下移动某些内容时,您希望使用insertafter
,而在列表中向上移动时,您希望使用insertbefore
希望这有帮助:)当您将列表中最上面的项目向下移动到第4点时,您需要
2,3,4,1,5,6,7
1,2,3,7,4,5,6
(在4之后插入1)
当您将列表中的底部项目上移到第4点时,您需要
2,3,4,1,5,6,7
1,2,3,7,4,5,6
(在4之前插入7)
您需要知道正在移动的项目的索引。那么,TomDillinge是什么