我在购物清单上遇到了一段时间的麻烦,我的数组中的错误项目被删除,或者删除了多个项目。在我的代码中放置了一些警告语句后,我意识到这个函数正在触发两次:
/*Delete item*/
$(document).on('click', '.bin', function(){
var me = this;
var item = $(me).closest('li');
var index = $(item).text();
var newString = index.replace(/[0-9]/g, '');
var indx = items.indexOf(newString);
items.splice(indx, 2);
console.log(items);
localStorage.setItem("items", JSON.stringify(items));
$(item).slideUp();
});
知道为什么会这样吗?我已经尝试了所有东西而且完全卡住了。
完整的js:
$(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 me = this;
var item = $(me).closest('li');
var index = $(item).text();
var newString = index.replace(/[0-9]/g, '');
var indx = items.indexOf(newString);
items.splice(indx, 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>'
);
}
});
答案 0 :(得分:1)
在此功能中:
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>'
);
}
尝试提供image
除bin
之外的其他课程。 bin
类的两倍,因此是调用的两倍。