作者franklee0402 (FrankLee)
看板Ajax
标题[问题] dynamic table 和jquery
时间Mon Aug 15 21:36:46 2016
各位前辈好。小弟是学校替代役，暑假在学校当哈登，
负责买饭，最近开始起手写起这点菜的网站。
先谢谢各位，若有哪边不合规矩，再麻烦您提醒我一下。谢谢！
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://webptt.com/cn.aspx?n=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
1F：→ Hevak: 你测试的浏览器是？我用Chrome 50没遇到你说的问题 08/15 22:24
2F：→ Hevak: 喔对不起，原来你说的是function，我没看清楚，我这边也有 08/15 22:25
3F：→ Hevak: 遇到你说的问题 08/15 22:25
4F：→ Hevak: 其实id这个东西原则上一页只能有一个同样的id.... 08/15 22:26
5F：→ Hevak: 所以其实你的写法还会有加到别栏就会抓错值的问题 08/15 22:27
所以是我用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
6F：推 dnzteeqrq: 先後顺序的问题，你每次抓到的值都是上一次的 08/15 23:03
7F：→ dnzteeqrq: 让getIkegamiPrice()再on('click','.qtyplus')之後执行 08/15 23:15
大神！感谢您，数量更新的地方我成功了!!真开心～～～
※ 编辑: franklee0402 (223.141.54.126), 08/15/2016 23:49:17