[問題] dynamic table 和jquery

看板Ajax作者 (FrankLee)時間8年前 (2016/08/15 21:36), 8年前編輯推噓1(106)
留言7則, 2人參與, 最新討論串1/1
各位前輩好。小弟是學校替代役,暑假在學校當哈登, 負責買飯,最近開始起手寫起這點菜的網站。 先謝謝各位,若有哪邊不合規矩,再麻煩您提醒我一下。謝謝! http://163.17.177.11/ordering/ 我有一個dynamic table 來增加點餐人數。 問題在於我的加減號部分,第一次按下加號時, 我console.log(document.getElementById("qty").value;) 回饋的份量數值不會變,要按下第二次才會變。 (ex: 1,1,2,3,4) 我認為在jquery的.prev()出現問題,但已經卡關好久了, 觀念或邏輯不曉得哪邊出現錯誤? //HTML 加減號按鈕的部分 <td class="cart_quantity" id="input_div"> <input type='button' value='-' class='qtyminus' field='quantity' onclick="getPrice()"/> <input type='text' name='quantity' value='1' id='qty' class='qty'/> <input type='button' value='+' class='qtyplus' field='quantity' onclick="getPrice()"/> </td> //JS 用來增加點菜人欄位 function addPerson(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[1].cells[i].innerHTML; } } //算價格的部分 function getIkegamiPrice(){ var x = document.getElementById("ikegamiID"); var i = x.selectedIndex; var q = document.getElementById("qty").value; //數量回報出現問題的地方。如果我連續按加號 //quantity: 1 //quantity: 1 //quantity: 2 //quantity: 3 console.log("quantity: " + q); var ikegami = [ ["招牌飯", 55], ["爌肉飯", 65], ["炸排骨飯", 65], ["滷排骨飯", 65], ["雞排飯", 60], ["土魠魚飯", 65], ["炸雞腿飯", 80], ["蜜汁雞腿飯", 80] ] var price = ikegami[i-1][1] * q; document.getElementById("priceCell").innerHTML = price; } //jquery //這是加號按下去時用的jquery部分 $(document).on('click', '.qtyplus', function(e){ e.preventDefault(); var $input = $(this).prev('input'); var currentVal = parseInt($input.val()); if (!isNaN(currentVal)) { $input.val(currentVal + 1); } else { $input.val(0); } }); //這是減號 $(document).on('click', '.qtyminus', function(e){ e.preventDefault(); var $input = $(this).next('input'); var currentVal = parseInt($input.val()); if (!isNaN(currentVal) && currentVal > 1 ) { $input.val(currentVal - 1); } else { $input.val(0); } }); -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.141.54.126 ※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1471268209.A.727.html ※ 編輯: franklee0402 (223.141.54.126), 08/15/2016 22:12:13 ※ 編輯: franklee0402 (223.141.54.126), 08/15/2016 22:13:29

08/15 22:24, , 1F
你測試的瀏覽器是?我用Chrome 50沒遇到你說的問題
08/15 22:24, 1F

08/15 22:25, , 2F
喔對不起,原來你說的是function,我沒看清楚,我這邊也有
08/15 22:25, 2F

08/15 22:25, , 3F
遇到你說的問題
08/15 22:25, 3F

08/15 22:26, , 4F
其實id這個東西原則上一頁只能有一個同樣的id....
08/15 22:26, 4F

08/15 22:27, , 5F
所以其實你的寫法還會有加到別欄就會抓錯值的問題
08/15 22:27, 5F
所以是我用dynamic table增加欄位,複製同樣的id,造成抓錯數值嗎? 這樣的話應該用什麼方式比較好呢 ※ 編輯: franklee0402 (223.141.54.126), 08/15/2016 22:36:50 ※ 編輯: franklee0402 (223.141.54.126), 08/15/2016 22:38:56

08/15 23:03, , 6F
先後順序的問題,你每次抓到的值都是上一次的
08/15 23:03, 6F

08/15 23:15, , 7F
讓getIkegamiPrice()再on('click','.qtyplus')之後執行
08/15 23:15, 7F
大神!感謝您,數量更新的地方我成功了!!真開心~~~ ※ 編輯: franklee0402 (223.141.54.126), 08/15/2016 23:49:17
文章代碼(AID): #1NiSLnSd (Ajax)
文章代碼(AID): #1NiSLnSd (Ajax)