我有网页，用户可以将不同的产品添加到购物车中，并且我使用计算器添加数量我在某种程度上成功地使用计算器按钮将最后选择的项目的数量添加到9如果用户想要10个数量，请帮助我，因为我被卡住了。 here is fiddle demo
这里是html。
<body>
<div class="container">
<div class="left">
<div class="left-top">
<ul class="add">
</ul>
<ul style="float:right">
<li id="total" data-value="0"></li>
</ul>
</div>
<div class="left-bottom">
<div class="box-left">
<div class="btnBG">
<span>Cash Journal-Test</span>
</div>
<div class="btnBG">
<span>Bank Journal-Test</span>
</div>
</div>
<div class="box-right">
<div class="box-right-left" id="box-right-left">
<div class="btnSM">
<span><button data-value="1">1</button></span>
</div>
<div class="btnSM">
<span><button data-value="2">2</button></span>
</div>
<div class="btnSM">
<span><button data-value="3">3</button></span>
</div>
<div class="btnSM">
<span><button data-value="4">4</button></span>
</div>
<div class="btnSM">
<span><button data-value="5">5</button></span>
</div>
<div class="btnSM">
<span><button data-value="6">6</button></span>
</div>
<div class="btnSM">
<span><button data-value="7">7</button></span>
</div>
<div class="btnSM">
<span><button data-value="8">8</button></span>
</div>
<div class="btnSM">
<span><button data-value="9">9</button></span>
</div>
<div class="btnSM">
<span>+/-</span>
</div>
<div class="btnSM">
<span>0</span>
</div>
<div class="btnSM">
<span>.</span>
</div>
</div>
<div class="box-right-right">
<div class="btnSM">
<span>Qty</span>
</div>
<div class="btnSM">
<span>Disc</span>
</div>
<div class="btnSM">
<span>Price</span>
</div>
<div class="btnSM">
<span>*</span>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="right-top1">
<a href="#"><img src="images/home_w.png" /></a>
<span class="search"><span class="img"></span><input type="search" name="search" placeholder="Search Products" /></span>
</div>
<div class="right-top">
<div class="box1">
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box1">
<img src="images/free.png" />
<h1>Food</h1>
</div>
<div class="box1">
<img src="images/fru.png" />
<h1>Fresh Fruits</h1>
</div>
<div class="box1">
<img src="images/veg.png" />
<h1>Fresh Vegetables</h1>
</div>
<div class="box1">
<img src="images/camera.png" />
<h1>Others</h1>
</div>
</div>
<div class="right-bottom">
<div class="box2">
<p data-value="800">pkr 800.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="800">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="800">pkr 800.0</p>
<img src="images/col.png" />
<h1>Beverg</h1>
</div>
</div>
</div>
</div>
这里是javascript。
<script type="text/javascript">
$(document).ready(function() {
$('.box2').click(function(){
var price=$(this).find('p').html();
var product=$(this).find('h1').html();
price = price.replace("pkr ","") * 1;
var price1=parseInt(price)+ parseInt($("#total").attr('data-value'));
$("#total").attr('data-value', price1);
$("#total").html('$'+price1);
if(product)
{
if($(".add li:first").html()== undefined)
{
//$('<li><input type="checkbox" name="selectedItem" /></li>').prependTo('.add');
$('<li>', {html: price}).prependTo('.add');
$('<li>', {html: product}).prependTo('.add');
}
else
{
$('<li>', {html: product}).appendTo('.add');
$('<li>', {html: price}).appendTo('.add');
}
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#box-right-left").find(".btnSM").on('click', function(e)
{
e.preventDefault();
var price1=$(".add").find('li:last').html();
price1 = price1.replace("pkr ","") * 1;
alert(price1);
var price=parseInt(price1)* parseInt($(this).find('button').attr('data-value'));
$(".add li:last").html(price);
var total=parseInt($("#total").attr('data-value'))+ parseInt(price)-parseInt(price1);
$("#total").attr('data-value', total);
$("#total").html('$'+total);
//alert(total);
});
});
</script>
答案 0 :(得分：1)
你必须在9之后显示10的按钮，因为如果你等待用户在1之后点击0它将会减慢过程并且用户将无法立即处理订单
用户会生气哦!!!! 我现在该怎么办？如果您的要求超过9,10等，这将是一个不好的方法
或者解决此问题的另一种方法是在9之后添加下拉菜单，以便用户点击下拉列表
关于这方面的更多方法是为什么你给他添加 +你的数量，或者当他添加数量时给用户提供文本框
更新＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;
在此处提供一个文本框，在此处一个按钮 1 2 3 4 5 6 7 8 9 0
如果用户点击一个，如果用户按0 ，那么其中一个将在文本框中，那么当 10 时，用户点击右侧按钮 10将添加到购物车