Question

我想限制添加相同的任务，并在有人尝试时显示警报“已经有这样的任务”。

$('#list-items').html(localStorage.getItem('listItems'));
$('.add-items').submit(function(event) {
    event.preventDefault();
    var item = $('#todo-list-item').val();

    if (item) {
        $('#list-items').append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");
        localStorage.setItem('listItems', $('#list-items').html());
        $('#todo-list-item').val("");
    }
});

Answer 1

您可以filter个li元素，并检查是否有任何元素与输入值具有相同的text()。

在进行比较之前，我们需要使用substring删除由x锚添加的remove，然后trim删除文本，并使用{{3 }}

点击“运行代码段”进行测试：

$('#add-items').click(function(event) {
    var item = $('#todo-list-item').val().trim();
    let itemCount = $("#list-items li").filter((i, li) => {
        let text = $(li).text().trim().toLowerCase();
        return text.substring(0, text.length-1) === item.toLowerCase();
    }).length;

    if (itemCount > 0) {
        alert("There is already such a task");
        return;
    }

    if (item && itemCount === 0) {
        $('#list-items').append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");
        $('#todo-list-item').val("");
    }
});

.remove {
    color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="todo-list-item" />
<button id="add-items">Add</button>

<ul id="list-items">
</ul>

如何检查待办事项列表中的重复项？

1 个答案: