2016-12-14 68 views
1

我正在學習如何通過購物清單運動管理應用程序的狀態。按照指示,我在那裏我存儲我添加任何物品的對象內部的數組:如何從陣列是一個對象的內部取出的特定元素?

var state = { 
    items: [] 
}; 

要修改state我用這個函數:

var addItem = function(state, item) { 
state.items.push(item); 
}; 

它通過一個事件監聽器後來被稱爲(並通過renderList添加到DOM,這裏沒有顯示):

$('#js-shopping-list-form').submit(function(event){ 
    event.preventDefault(); 
    addItem(state, $('#shopping-list-entry').val()); 
    renderList(state, $('.shopping-list')); 
}); 

如何從數組中刪除我的state對象內的具體項目?基本上我想要扭轉,當用戶點擊<button class="shopping-item-delete">上面的序列。

下面是最終解決方案的演示:https://thinkful-ed.github.io/shopping-list-solution/

HTML

<body> 

    <div class="container"> 

    <form id="js-shopping-list-form"> 
     <label for="shopping-list-entry">Add an item</label> 
     <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli"> 
     <button type="submit">Add item</button> 
    </form> 

    <ul class="shopping-list"> 
    <li> 
     <span class="shopping-item">apples</span> 
     <div class="shopping-item-controls"> 
      <button class="shopping-item-toggle"> 
      <span class="button-label">check</span> 
      </button> 
      <button class="shopping-item-delete"> 
      <span class="button-label">delete</span> 
      </button> 
     </div> 
     </li> 
    </ul> 
    </div> 

    <script 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
    crossorigin="anonymous"></script> 
<script type="text/javascript" src="app.js"></script> 
</body> 

回答

2

您可以創建一個功能如下:

var deleteItem = function(state, item) { 
    var index = state.items.indexOf(item); 
    if (index > -1) { 
     state.items.splice(index, 1); 
    } 
}; 

注意,方法indexOf在Internet Explorer 7和8不支持

+0

當然,我們可以放手IE 7和8吧?這幾乎是2017年!哈哈,反正填充工具都可以在這裏https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Polyfill –

+0

@Andy發現,這個偉大的工程!謝謝。 –

0

有幾種方法可以從陣列中移除元素:

shift將從頭開始刪除第一項

pop將從最後刪除最後一項。

splice可以讓你在需要的位置刪除元素

注意,所有這些將修改原始數組(他們的工作「就地」),而不是返回一個新的數組。

0

您可以循環在項目

var removeItem = function(state, item) { 
    for(var i = state.items.length - 1; i >= 0; i--) { 
    if(state.items[i] === item) { 
     state.items.splice(i, 1); 
     break; 
    } 
    } 
}; 
相關問題