Question

我正在创建一个待办事项列表，能够从列表中删除特定项目。我目前正在尝试使用“ localStorage”本质上保存页面刷新时的列表。但是，当我从列表中删除一项时，“ localStorage”无法按预期工作，而是在下次加载页面时删除数组中的第一项。

JS和jQuery：

$(document).ready(function () {
    $(document).on('click', '.delete-task', function () { // We use 'on' as the element is dynamically added
        console.log("'Delete' button pressed");

        var foo = $(this).closest('li');
        console.log(foo);


        $(this).closest('li').fadeOut(250, function() {

            arr.splice(foo, 1);

            $(this).remove(); // Dynamically remove the DOM element from the list
            localStorage.setItem('items', JSON.stringify(arr));

            console.log(arr);
            console.log(localStorage.getItem('items'));

        });
    });
});

如果感兴趣，“ ul”列表中某项的HTML格式类似于以下内容：

<li><span class="text-task">5</span><span class="delete-task">x</span></li>

我希望从列表中选择的项将被删除，并在下次加载页面时正确地存储在localStorage中。

更新：正如@Slim指出的那样，“ foo”是一个JS对象，而不是索引。

我的问题是，如何在“ arr”数组中找到指定项目（“ li”）的索引？

Answer 1

您可以尝试使用.parent()（https://api.jquery.com/parent/）查找foo的父级，然后使用.index()（https://api.jquery.com/index/）查找给定li的索引

...
var index = foo.parent().index( foo );
arr.splice(index, 1);
...

此外，您应该尝试缓存jQuery对象。多次调用$(this)会多次计算同一件事。例如：

...
var $self = $(this)
var foo = $self.closest('li');
console.log(foo);
$self.closest('li').fadeOut(250, function() {
...

另外，一个好主意是命名包含以$开头的jQuery对象的变量-这是一种非常常见的模式。

Answer 2

对此进行模拟

<ul id="list">
  <li data-id="1" >Coffee <span class="delete-task">x</span></li>
  <li data-id="2" >Tea    <span class="delete-task">x</span></li>
  <li data-id="3" >Milk   <span class="delete-task">x</span></li>
</ul>

在此处使用id值

$(document).on('click', '.delete-task', function () { 

     var id = $(this).parents('li').attr('data-id');

      for (var k in arr) {
        if (typeof arr[k] !== 'function') {
        if (arr[k].id == id) {
              //your codes
               break;
             }
           }
         }   

  });

我还建议您使用：https://github.com/localForage/localForage

有没有一种技术可以从数组中删除值“ this”的项？

2 个答案: