以下是我參考的codepen :https://codepen.io/mtbroomell/pen/yNwwdv
我表格上每樣產品都會有這個 +- 來控制增加減少數量，但他現在是以id 為單位，所以我有10樣產品就需要10個不同的ID 分別在html/js 都要有十個對應的ID code 這樣我覺得好沒效率~ 請問如何能使JS那邊挷我的 <span class="shop-item-title">產品名稱</span> 去做對應的+-項目
以下為單一產品時的code:
<div class="shop-items">
<div class="shop-item">
<span class="shop-item-title">炸排骨飯</span>
<img class="shop-item-image" src="Images/item_1.jpg">
<div class="shop-item-details">
<span class="shop-item-price">價格: 80元</span>
<form><div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input class="cart-quantity-input" type="number" id="number" value="1" />
<div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div></form>
<button onclick="snackbarfun()" class="btn btn-primary shop-item-button" type="button">加入購物車</button>
</div>
<div id="snackbar">成功加入購物車</div>
</div>
已邀請的邦友 {{ invite_list.length }}/5
如果是原生JS的話。
你可以利用 getElementsByClassName 來取得。
但要注意一件事。畢竟他並非是唯一性。
所以拿到的值會是一個組合陣列。
你要再利用 for 或是 each 來處理。
那可以請問一下function increaseValue() { var value = document.getElementsByClassName('A'); for (var i = 0; i < value.length; i++) { alert(value[i]); }
我看他打印的都是長這樣[object HTMLFormElement]
我要怎樣從[object HTMLFormElement] 裡拆分下面的元素?
謝謝你
alanotmt 妳試試看console.log(value[i]);因為alert 看不到元素的細節,如果要看物件細項可以用console喔~
一般都是利用 console 來處理。.log 會幫你輸出到console給你查看。(請記得先按F12的DEBUG模式看)
alert 只能顯示字串值。如果是物件值的話。
就只會出現對應物件的類型而已。
這些是基本觀念。要學習進去。
這是學前端語言必學的技能。
如果你願意嘗試新的ES6 querySelector用法的的話，可以試試~抓出來的東西類似陣列的NodeList 節點元素，瀏覽器開發者模式也能看到結構，也能用迴圈做迭代。
const title = document.**querySelectorAll**('.shop-item-title') //抓出節點元素
//如果除了排骨飯，還有其他項目(雞腿、豬腳等)會抓出同class類別的節點
console.log(title.innerHTML) //這樣才能看內部HTML結構
//querySelectorAll不只能使用CSS選取器，也能用id篩選(改成#id)就行
你也可以嘗試在chrome瀏覽器DOM操作，會直接顯示結果
另外，如果真的想要知道網頁所有品項，那就可以使用迴圈迭代
title.forEach( (item) => {
console.log(item.innerText)
})
//會打印出所有品項
至於你說的品項操作，應該是要綁在上層 <div class="shop-item">，用選取器才能抓出整包結構，<span class="shop-item-title">炸排骨飯</span>只是其中一個封閉節點結構，
可以在JS插入模板時用迴圈加入特定id號碼管理品項，<div class="shop-item" data-id='1'>。
一起加油~我也在轉職學習中...
我可能會用陣列耶
let shopItem = [
{title:'炸排骨飯',amount:0},
{title:'炸蝦排飯',amount:0},
{title:'炸魚排飯',amount:0}
]
const decreaseValue = (index)=>{
if(shopItem[index][amount]>0) shopItem[index][amount] = shopItem[index][amount] -1
}
const increaseValue = (index)=>{
//最多只能訂1000份
if(shopItem[index][amount]< 1000) shopItem[index][amount] = shopItem[index][amount] +1
}
const snackbarfun = (index)=>{
//將shopItem[index]的資料，加入購物車
}
html那邊就改成這樣
<div class="shop-items">
<div class="shop-item">
<span class="shop-item-title">炸排骨飯</span>
<img class="shop-item-image" src="Images/item_1.jpg">
<div class="shop-item-details">
<span class="shop-item-price">價格: 80元</span>
<form>
<div onclick="decreaseValue(0)">-</div>
<input type="number" value="shopItem[0][amount]" />
<div onclick="increaseValue(0)">+</div>
</form>
<button onclick="snackbarfun(0)"
class="btn btn-primary">
加入購物車
</button>
<div id="snackbar">成功加入購物車</div>
</div>
iThome鐵人賽
看影片追技術