Question

我正在学习JS，并且在单击后如何将列表项发送到列表底部需要一些帮助或建议。目前，您可以添加待办事项列表项，选中将添加删除线的项目并将不透明度设置为该项目的0.5（清除）。

我想将选中的项目发送到列表的底部，在顶部保留所有未选中的“任务”。

我的HTML

<!DOCTYPE html>
<html>
<head>
    <title>Pomodo</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="scripts.js"></script>
</head>

    <body>
        <div class="hero">
            <div class="container">
                <h1 class="text-center display-2">Pomo.do</h1>
                    <p class="lead text-center">Go deep. Get things done.</p>
                        <div class="row">
                            <div id="pomodo-form" action="" class="col-8 mx-auto">
                              <div class="input-group">
                                <input type="input" class="form-control" id="pomodo-input" placeholder="What do you need to do today?"><span><button id="pomodo-btn" type="submit" class="btn btn-primary">Submit</button></span>
                              </div>


                            </div>
                        </div>
                <div class="row">
                   <ul id="pomodo-list" class="col-8 mx-auto">
                    </ul>
            </div>
        </div>

    </body>
</html>

我的JavaScript。

window.onload = function() {
//variables
var form = document.getElementById("pomodo-form");
var input = document.getElementById("pomodo-input");
var btn = document.getElementById("pomodo-btn");
var list = document.getElementById("pomodo-list");
var id = 1;

//button event listener
btn.addEventListener("click", addTodoItem);

//list event listener
list.addEventListener("click", boxChecked);

//add todo item to list
function addTodoItem() {
    if(input.value === "") {
        alert("Please enter a To Do List Item.");
    }
    else {
        if(list.style.borderTop === "") {
            list.style.borderTop = "2px solid #fff";
        }
        var text = input.value;
        var item = `<li id="li-${id}">${text}
                    <input id="box-${id}" 
                           class="checkboxes"
                           type="checkbox"></li>`;
        list.insertAdjacentHTML('beforeend', item);
        id++;
        input.value = ""; // reset the input value when button is clicked + not empty.
    }
}

//Add Strikethrough on completed to do list items.
function boxChecked(event) {
    const element = event.target;
    if(element.type === "checkbox") {
        if( element.checked ){
            element.parentNode.style.textDecoration = "line-through";
            element.parentNode.style.opacity = 0.5;

        }else{
            element.parentNode.style.textDecoration = "none";
            element.parentNode.style.opacity = 1;
        }

    }
}
}

Answer 1

如果我了解您要完成的工作，则需要创建某种杂货店清单，该清单可以向其中添加商品，并且每个商品都有一个可以选中的复选框（当商品已经购买时）（例如），每当该项目被选中时，它应移至列表底部，而每当未选中该项目时，应移至列表顶部。

在这种情况下，使用jQuery完成此操作将使事情变得容易得多。这是我刚才描述的一个有效示例：

//trigger adding new elements to the list
$("#btn").click(function() {
  var txt = $("#txt_item").val();
  // make sure the text is not empty
  if (txt.trim().length > 0) {
    //create li item
    var item = $("<li></li>")
      .append("<input type='checkbox'>")   // add checkbox
      .append(txt);                        // add text string
      
    $("#list").prepend(item);              // put the item at the top of the list
    $("#txt_item").val("");                // clear the textbox for next item 

  }

});



//since we will be adding elements dynamically, we can't use $().change()
// we have to use $(document).on() 

$(document).on('change', '#list input[type=checkbox]', function() {
  
  //do we have a checked box?
  if ($(this).is(":checked")) {  // if yes:
  
    var last = $("#list li").last();     // locate the last item
    $(this).parent().insertAfter(last);  // insert current one after it (at bottom)
  } else {
                                         // if not
    var first = $("#list li").first();   // locate the first item
    $(this).parent().insertBefore(first);// insert current one before it (on top)
  }
});

body {
  font-family: calibri;
}

ul {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Enter an item to add : <input type="text" id="txt_item" value="Coffee"><button id="btn">Submit</button>

<br>

<ul id="list">
  <li><input type="checkbox">Bread</li>
  <li><input type="checkbox">Honey</li>
  <li><input type="checkbox">Milk</li>
</ul>

Answer 2

最简单的方法之一是在该元素的父元素上重新附加该元素。

选中该选项后，我使用appendChild()重新附加元素，该元素将元素附加为最后一个子元素。

未选中时，我使用insertBefore()并以firstChild作为参考重新附加元素。

function boxChecked(event) {
        const element = event.target;
        if(element.type === "checkbox") {
            if( element.checked ){
                element.parentNode.style.textDecoration = "line-through";
                element.parentNode.style.opacity = 0.5;
    
                const parent = element.parentElement.parentElement;
                parent.appendChild(element.parentElement);
            }else{
                element.parentNode.style.textDecoration = "none";
                element.parentNode.style.opacity = 1;

                const parent = element.parentElement.parentElement;
                parent.insertBefore(element.parentElement, parent.firstChild);
            }
        }
    }

<div>
<div>
<input id="cb1" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb1">Pen</label>
</div>

<div>
<input id="cb2" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb2">Pineapple</label>
</div>

<div>
<input id="cb3" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb3">Apple</label>
</div>

</div>

将完成的清单项目发送到清单底部

2 个答案: