我正在學習如何通過購物清單運動管理應用程序的狀態。按照指示,我在那裏我存儲我添加任何物品的對象內部的數組:如何從陣列是一個對象的內部取出的特定元素?
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>
當然,我們可以放手IE 7和8吧?這幾乎是2017年!哈哈,反正填充工具都可以在這裏https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Polyfill –
@Andy發現,這個偉大的工程!謝謝。 –