爲什麼檢索方法在這裏不起作用？

可以說有3個div（可以有數千個這樣的div）在父div內具有相同的類。爲什麼檢索方法在這裏不起作用？

他們每個人都有一些動態變化的文字。當我嘗試使用localstorage保存他們的內容並將其複製時，第一個div的html會被複制到其他2個div中。

HTML

<div class="parent"> 
    <div class="child">*dynamically changing text</div> 
    <div class="child">*dynamically changing text</div> 
    <div class="child">*dynamically changing text</div> 
</div>

腳本中檢索內容

if (localStorage.getItem('counter') === null) 
{ 
    $(".parent > div").each(function() 
    { 
     localStorage.setItem('counter', $(this).find(".child").html()); 
    }); 
    var counter = 0; 
} 
else 
{ 
    $(".parent > div").each(function() 
    { 
     $(this).find(".child").html(localStorage.getItem('counter')); 
     var counter = localStorage.getItem('counter'); 
    }); 
}

腳本設置內容

$(".parent > div").each(function() 
{ 
    localStorage.setItem('counter', $(this).find(".child").html()); 
});

現在，讓我們說，內容變化如下：第一個孩子： 4 第二胎：5 第三個孩子：10

現在，當我檢索所有3個孩子divs顯示4.如何解決這個問題？

來源

2015-01-04 Anupam Ram

'counter'是一個字符串，它的關鍵，所以你在覆蓋每一個的localStorage時間指數。在localStorage中存儲數千個元素的內容真的是一個好主意嗎？ – adeneo 2015-01-04 14:34:37

當我嘗試使用localstorage保存他們的內容，並檢索它們時，第一個div的html被複制到其他2個div中。

那麼，當然這是 —這就是你的代碼明確做的。您只有一個counter在本地存儲中，並且您在您的each循環中重複覆蓋它以保存，並且您反覆重新檢索並將其應用於您的each循環中以獲取。

使用不同名稱（counter0，counter1等）存儲在本地存儲不同的div的文本。您可以從第一個參數中獲取它們到each，這是您訪問的元素的索引。

檢索，並創建counterX，如果它不存在：

$(".parent > div").each(function(index) 
{ 
    var counter = localStorage.getItem('counter' + index); 
    if (counter === null) 
    { 
     // Create 
     localStorage.getItem('counter' + index, $(this).find(".child").html()); 
    } 
    else 
    { 
     // Use 
     $(this).find(".child").html(counter); 
    } 
});

設置：

$(".parent > div").each(function(index) 
{ 
    localStorage.setItem('counter' + index, $(this).find(".child").html()); 
});

來源

2015-01-04 14:35:21

好吧，我現在明白了。但現在如何爲每個div自動創建一個計數器。 – 2015-01-04 14:38:02

@AnupamRam：你的意思是「自動創建」？ – 2015-01-04 14:38:30

如果有上百個div，會怎麼樣？不可能手動創建counter0，counter1 .... uptill counter100。如何自動創建所有這些計數器？ – 2015-01-04 14:42:09

您需要：

或者使用不同的localStorage項目爲每div元素，與TJ相同克勞德說。
或撰寫所有文字的array，並將其保存在一個localStorage項目中。

使用index在jQuery的.each()功能設置，如果你去上面提到的第一個選項得到localStorage的項目。

$(".child").each(function(index) { 
    localStorage.setItem('counter'+index, $(this).html()); 
});

通過此代碼，您可以猜出您要編寫的代碼，而getting該項目。

電文讀出：.each() | jQuery

來源

2015-01-04 14:40:15

*「和T.J.克勞德說的一樣......」*那爲什麼要重複呢？ – 2015-01-04 14:46:20

@ T.J.Crowder那麼，我想添加一些代碼，將他介紹到'.each（）'循環中的'index'。多數民衆贊成我如何想讓我的答案不同於你的答案。 – 2015-01-04 14:50:20

嗯....沒關係..... – 2015-01-04 14:53:56

爲什麼檢索方法在這裏不起作用？

回答

相關問題