Question

我有一个带有一系列li元素的无序列表。目前，我的代码在点击它们时动画我的li元素并更改ul中的位置。

我正在尝试添加一些额外的功能，具体取决于li元素是否选中了复选框或未选中复选框。

我想要获得的行为如下：

1）如果你选中一个方框，它就会升到列表顶部

2）如果你取消选中它会落后于已检查的项目，它是否会转到底部或返回其旧位置无关紧要

这是HTML的基本框架：

<ul>
   <li class="js-checkbox" id="1"><input type="checkbox">I am list item number 1.</li>
   <li class="js-checkbox" id="2"><input type="checkbox">I am list item number 2.</li>
   <li class="js-checkbox" id="3"><input type="checkbox">I am list item number 3.</li>
   <li class="js-checkbox" id="4"><input type="checkbox">I am list item number 4.</li>
   <li class="js-checkbox" id="5"><input type="checkbox">I am list item number 5.</li>
</ul>

Answer 1

$('ul > li > input[type="checkbox"]').on("click", function() {
    var parent = $(this).parent("li");
    if($(this).is(":checked") === true) {
    // move to the top
    $(parent).slideUp(300, function() {
      $(parent).prependTo($(parent).parent());
      $(parent).slideDown(300);
    });
    } else {
      $(parent).slideUp(300, function() {
        $(parent).appendTo($(parent).parent());
        $(parent).slideDown(300);
      });
    }
});

body {
    font-size: 14px;
    font-family: sans-serif;
}

li, ul {
    position: relative;
    top: 0;
    left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li class="js-checkbox" id="1"><input type="checkbox">I am list item number 1.</li>
   <li class="js-checkbox" id="2"><input type="checkbox">I am list item number 2.</li>
   <li class="js-checkbox" id="3"><input type="checkbox">I am list item number 3.</li>
   <li class="js-checkbox" id="4"><input type="checkbox">I am list item number 4.</li>
   <li class="js-checkbox" id="5"><input type="checkbox">I am list item number 5.</li>
</ul>

Answer 2

这样的事情怎么样：

＆＃13;

$("ul li input").on("change", function() {
  var self = $(this);
  var $li = self.parent();
  debugger;
  if (self.is(":checked")) {
    $li.slideUp(function() {
      $li.insertBefore($li.siblings(':eq(0)')).slideDown();
    });
  }

});

＆＃13;

body {
  font-size: 14px;
  font-family: sans-serif;
}

li,
ul {
  position: relative;
  top: 0;
  left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="js-checkbox" id="1">
    <input type="checkbox">I am list item number 1.</li>
  <li class="js-checkbox" id="2">
    <input type="checkbox">I am list item number 2.</li>
  <li class="js-checkbox" id="3">
    <input type="checkbox">I am list item number 3.</li>
  <li class="js-checkbox" id="4">
    <input type="checkbox">I am list item number 4.</li>
  <li class="js-checkbox" id="5">
    <input type="checkbox">I am list item number 5.</li>
</ul>

＆＃13;

动画的分数转到这个答案https://stackoverflow.com/a/3256799/641530

检查后将列表元素移至顶部

2 个答案: