使用本地存儲的可排序列表的功能錯誤

-1

我正在使用此功能與framework7可排序列表來保存列表的順序的位置，我可以將它們保存到本地存儲，但我無法讀取它們，我得到這個錯誤：使用本地存儲的可排序列表的功能錯誤

遺漏的類型錯誤：無法讀取的不確定

屬性 'ID' 和其reffering這一行：

if (ls[j] === itemsArr[i].dataset.id) {

這是我的全部功能：

var list = document.getElementById('my-id'); 
var items = list.children; 
var itemsArr = []; 
for (var i in items) { 
itemsArr.push(items[i]); 
} 
// localStorage 
var ls = JSON.parse(localStorage.getItem('data-user-sort') || '[]'); 

for (var j = 0; j < ls.length; j++) { 
for (i = 0; i < itemsArr.length; ++i) { 
    if (ls[j] === itemsArr[i].dataset.id) { 
    list.appendChild(itemsArr[i]); 
    } 
}  
} 


$('.list-block.sortable').on('sort', function() { 
var newIdsOrder = []; 
$(this).find('li').each(function(){ 
    newIdsOrder.push($(this).attr('data-id')); 
}); 

localStorage.setItem('data-user-sort', JSON.stringify(newIdsOrder)); 
});

，在這裏我的html：

<div class="list-block sortable"> 
     <ul id="my-id"> 
     <li data-id="1"> 
      <a href="#" class="item-link item-content"> 
      <div class="item-inner"> 
       <div class="item-title">Item 1</div> 
      </div> 
      </a> 
      <div class="sortable-handler"></div> 
     </li> 
     <li data-id="2"> 
      <a href="#" class="item-link item-content"> 
      <div class="item-inner"> 
       <div class="item-title">Item 2</div> 
      </div> 
      </a> 
      <div class="sortable-handler"></div> 
     </li> 
     <li data-id="3"> 
      <a href="#" class="item-link item-content"> 
      <div class="item-inner"> 
       <div class="item-title">Item 3</div> 
      </div> 
      </a> 
      <div class="sortable-handler"></div> 
     </li> 
     </ul> 
    </div>

任何幫助嗎？

來源

2016-09-12 RogerHN

問題是您的itemsArr變量不僅包含「li」對象，所以當您迭代它時，最終會嘗試訪問不存在的對象上的「dataset」屬性。

如果你調試你的javascript，你會看到你有3個「li」類，列表的長度和2個函數（item（）和namedItem（）），因此，你在第三次迭代後得到這個錯誤。

正如別人已經說過的，您首先需要驗證屬性是否存在，但是他提供給您的代碼將失敗，因爲他還檢查數據集的屬性ID，該屬性值是未定義的值。此代碼應爲你工作：

for (var j = 0; j < ls.length; j++) { 
    for (i = 0; i < itemsArr.length; ++i) { 
    if(itemsArr[i].dataset !== undefined){ 
     if (ls[j] === itemsArr[i].dataset.id) { 
     list.appendChild(itemsArr[i]); 
     } 
    } 
    }  
}

您還可以檢查此的jsfiddle與驗證https://jsfiddle.net/7bv849wc/1/

編輯，因爲我忘了補充上itemsArr指數*

來源

2016-09-12 15:58:20

我在這裏錯過了一些東西，我仍然在你的代碼中出現錯誤。 '不能讀取未定義的屬性'0' – RogerHN

你確定你的代碼中沒有「itemsArr.0」或類似的東西嗎？因爲它看起來像你使用0作爲屬性，而不是索引。 –

我只是將你的代碼添加到函數中，現在它是這樣的：http://pastebin.com/raw/PYSAY7ix – RogerHN

看起來不是引發錯誤的本地存儲，而是試圖訪問未定義數組元素的屬性（在您的情況下是數據集）。你可以檢查該屬性不是未定義第一：

if ((itemsArr[i].dataset.id !== undefined) && ls[j] === itemsArr[i].dataset.id) {

您不妨做你的數據的額外檢查，以prevemt這些類型的錯誤，希望這可以幫助你回到正軌。

來源

2016-09-12 15:17:14 dading84

我與改變的功能你提供的代碼仍然有相同的錯誤。（我對JavaScript新手），但我認爲這不是閱讀財產權利。 – RogerHN

您可能需要檢查數據集屬性itemsArr [i] .dataset！== undefined以查看是否未定義。這就是錯誤信息所說的話，沒有證據可以預料在你的問題中存在本地存儲的錯誤 – dading84

使用本地存儲的可排序列表的功能錯誤

回答

相關問題