Question

我想创建一个无序列表。订单应该由他们的id给出（这是一个数字。最小的是在底部。）

但是如果某个li没有CSS属性（text-decoration：在我的情况下是line-through。）那么它们应该在底部。

我正在尝试创建待办事项列表，其中已选中的元素位于底部，但是当您取消选中它们时，它们会跳回原位。

http://codepen.io/balazsorban44/pen/Gjzwbp

const inputArea = document.getElementById('todo-input');
const list = document.getElementById('tasks');
tasks = [];
function loaded() {
    inputArea.focus();
}

function enter() {
    if (event.keyCode == 13) {
        addTask()
    }
}

function refresh(array) {
    var task = document.createElement('li');
    const checkBox = document.createElement('input');
    checkBox.setAttribute('type', 'checkbox');
    checkBox.setAttribute('onclick', 'toggleCheckBox()');
    task.appendChild(checkBox);
    task.appendChild(document.createTextNode(array[array.length - 1].task));
    task.id = array[array.length - 1].timestamp.getTime()
    list.appendChild(task);
    return list;
}

function addTask() {
    if (inputArea.value != '') {
        tasks.push({
        timestamp: new Date(),
                task: inputArea.value
        });
        inputArea.value = '';
        inputArea.focus();
        refresh(tasks);
        doneOrUndone();
        inputArea.placeholder = 'Click + or press Enter.'
    } else {
        inputArea.placeholder = 'Write something'
    }
}

function doneOrUndone() {
    var done = 0
    const out = document.getElementById('out')
    for (var i = 0; i < tasks.length; i++) {
        if (document.getElementsByTagName('li')[i].style.textDecoration != '') {
            done++
        }
    }
    out.value = parseInt(done) + '/' + parseInt(tasks.length) + ':'
}

function toggleCheckBox() {
    const task = event.target.parentNode
    if (task.style.textDecoration == '') {
        task.style.textDecoration = 'line-through';
        list.appendChild(task)
        doneOrUndone()
    } else {
        task.style.textDecoration = ''
        for (var i = 0; i < tasks.length; i++) {
            if (task.id < tasks[i].timestamp.getTime() && list.childNodes[0].style.textDecoration == 'line-through') {
                if (task.id > list.childNodes[0].id) {
                list.insertBefore(task, list.childNodes[0]);
                    break;
                }
            } else {
                list.insertBefore(task, list.childNodes[i]);
                    break
            }
        }
        doneOrUndone()
    }
}

Answer 1

我认为真正的问题是，在将style.textDecoration设置为line-through时，设置的实际属性为textDecorationLine。

因此，您的第if (task.style.textDecoration == '')行始终为真。

您可以将textDecoration替换为textDecorationLine，它应该有效。

http://codepen.io/anon/pen/bwzzkP

在我看来，此问题的根本原因是您使用元素的style属性来监控州。我建议：

将状态存储在javascript或
将状态存储在课程中，或
将状态存储在自定义data-属性

例如：

const task = event.target.parentNode;
const isDone = task.getAttribute("data-done");
task.style.textDecoration = !isDone ? 'line-through' : '';
task.setAttribute("data-done", !isDone);

仅排序具有CSS属性的数组元素JavaScript

1 个答案: