Question

我有一个简单的购物清单应用，您可以在其中动态创建和删除列表项，并使用localStorage保存它们。它正是我想要的工作方式，但后来我为每个项目添加了一个数量字段，并遇到了一些困难。我认为除了删除功能外，我大多修复了这些当您单击列表项上的bin图标时，它应该检查数组中该列表项的文本索引，然后拼接数组，这应该删除该项。如果列表中有一个项目，或者您总是尝试删除最后一个项目，但是如果删除列表中的第一个项目，则会拼接错误的列表项目。我必须找到错误的索引，但我不知道我做错了什么。任何帮助，将不胜感激！

JavaScript的

 $(document).on('click', '#enterbutton', function() {
     $.mobile.changePage('#notesPage');
 });



 $(document).on("pagecreate", "#notesPage", function() {

     /*Load local storage items*/
     var items = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : items = [];
     var even = [];
     var odd = [];


     console.log(items);
     items.forEach(function(key, value) {
         if (isOdd(value + 1) == 1) {
             even.push(key);
         } else {
             odd.push(key);
         }
     });
     if ((0 < even.length) && (0 < odd.length)) {
         for (i = 0; i < even.length; i++) {
             appendItem(even[i], odd[i]);
         }
     }


     /*Add new item*/
     $('form').on('submit', function(event) {
         event.preventDefault();
         if ($('#newNote').val() == '' || $('#newamount').val() == '') {
             alert('Input can not be left blank');
         } else {
             var item = $('#newNote').val();
             var inum = $('#newamount').val(); //Append this to the arrayItems;        saveToLocalStorage(item, inum);


             //Create the new item and inject to list        appendItem(item, inum);


             $('#mainList').listview('refresh');
             $.mobile.changePage('#notesPage');
         }
     });
     /*Delete item*/
     $(document).on('click', '.bin', function() {
         var item = $(this).closest('li');
         var index = items.indexOf($(item).text());
         items.splice(index, 2);
         console.log(items);
         localStorage.setItem("items", JSON.stringify(items));
         $(item).slideUp();

     });


     /*Check item*/
     $(document).on('click', '.check', function() {
         var item = $(this).closest('li');
         $(item).toggleClass("checked")

     });
     /*Save data to localStorage*/
     function saveToLocalStorage(data, data1) {
         items.push(data, data1);
         console.log(items);
         localStorage.setItem('items', JSON.stringify(items));
     }

     function isOdd(num) {
         return Math.abs(num % 2);
     }

     /*Append item to html*/
     function appendItem(data, data1) {
         $('#mainList').append('<li class="ui-li-static ui-body-inherit ui-first-child ui-last-child">' +
             '<input type="checkbox" class = "check" </input>' +
             '<div type="number" class = "number">' + data1 + '</div>' +
             '<div class="item">' + data + '</div>' +

             '<a href="javascript:undefined;" class="bin">' +
             '<img class="bin" src="Bin.png" ' +
             '</a>' + '</li>');
     }
 });

HTML

     </head> 
<body>
   <div id="firstPage" data-role="page">
      <div class="middle">
         <h1>My List</h1>
         <hr>
         <div data-role="main" class="ui-content">
            <a href="#" id="enterbutton" class="ui-btn ui-btn-inline ui-btn-b ui-corner-all">Let's Shop!</a>
         </div>
      </div>
   </div>
   <div id="notesPage" data-role="page" data-theme="c">
      <div data-role="header" id="hd1">
         <h1>My Shopping List</h1>
         <a href="#addNote" data-role="button" data-icon="plus" data-iconpos="notext">Add</a>
      </div>
      <br><br>
      <div role="main">
         <ul data-role="listview" id="mainList" data-inset="true">
         </ul>
      </div>
      <div data-role="footer" data-position="fixed">
      </div>
   </div>
   <div id="addNote" data-role="page" data-dialog="true" data-theme="c">
      <div data-role="header" id="hd3" data-theme="c">
         <h1>New Item</h1>
      </div>
      <div role="main" class="ui-content" id="hd2" data-theme="c">
         <form>
            <input type="text" name="note" id="newNote" placeholder="name...">
            <input type="text" name="amount" id="newamount" placeholder="amount...">
            <input type="submit" value="Add">
         </form>
      </div>
   </div>
</body>
</html>

Answer 1

同时添加m发送索引appendItem(even[i], odd[i],i);并将索引存储在data-index锚中的数据属性.bin中，同时使用该索引删除m以删除{{1} }

var index = $(this).data('index');

尝试这个我希望它有效。

.splice（）li items和localStorage

1 个答案: