Question

我正在进行调查以发送给客户。其中一个问题要求客户从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? (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>

这个问题的想法是左侧将显示他们排序的选项。右侧将显示一个列出优先级为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))
});

它在大多数情况下都有效。我遇到的问题是，当我在其中任何一个上选择优先级3时，它会移动到选项2而不是选项3.除了1和7之外，所有这些都会执行。如果选择优先级1，它将移至选项1应该如此。同样，如果选择优先级7，它将按预期移至选项7。但所有其他人都会在实际应该选择的选项之前转移到该选项。

Answer 1

因为当您按“优先级3”时使用insertbefore，它会在列表中的第三个索引之前插入它。基本上，当您在优先级中向下移动某些内容时，您希望使用insertafter，当您在列表中向上移动时，您将要使用insertbefore

希望这会有所帮助：）

Answer 2

当您将列表中的顶部项目向下移动到第4点时，您需要

2,3,4,1,5,6,7

（4后插入1）

当您将列表中的底部项目移动到第4位时，您需要

1,2,3,7,4,5,6

（在4之前插入7）

您需要知道要移动的项目的索引。然后，TomDillinger说：

var $index = index of the item contained in $subject;
if ($index < $position) {
  $tar.insertAfter($subject);
} else {
  $tar.insertBefore($subject);
}

Answer 3

仅供参考：以下是我使用上面提供的帮助提出的解决方案。

var random = function () {
    var list = $(".selection"); // An array of nodes

    for (i = 0; i < list.length; i += 1) {
        var random = Math.floor(Math.random() * list.length); // generates a random number less than or equal to the length of the array
        var insert = list.splice(i, 1);
        list.splice(random, 0, insert[0]);
    }

    $("#q2").html(list);

}
random();

$("[data-move]").bind("click tap", function sort(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
    var current = $(this).parents(".selection").attr("id"); // id of the current position
    var cur_index = 0; // ids array index of current position
    var ids = []; // array of ids in the given question

    $tar.fadeOut(600, function(){
        // Create parallel array to determine if move position is higher or lower than current position
        for (i = 0; i < list.length; i += 1) {
            ids.push(list[i].id);
        }
        cur_index = ids.indexOf(current);

        if ($position >= list.length) {
            // there is nothing to insert before so
            // insert at the bottom of the list
            $tar.insertAfter(list[list.length-1]);
        } else if (cur_index <= $position-1) {
            $tar.insertAfter($subject);
        } else {
            $tar.insertBefore($subject); // insert this <li> before the position
        }

        $tar.fadeIn(1000);
    });
});

我还添加了一个randomize函数，因此每次加载调查时，所有列表元素都是随机的。

感谢您的帮助。

Javascript排序功能无法正常运行

3 个答案: