今天coding的时候,写购物车,遇到了一个小小的麻烦,开始时候我是这样写的加减号那里的
(只写主要代码,样式不写了)
<li><span class="decs">-</span>1<span class="incs">+</span><li>
当写jQuery的时候就出现了问题,
// 减少的代码
$('.decs').click(function() {
var num = $(this).parent('li').text();
num = parseInt(num);
// 因为获得的num不只有数字,还有前边的“-”号
num = 0 - num;
if(num > 1){
$(this).parent('li').html('<span class="decs">-</span>'+ (num - 1)
+ '<span class="incs">+</span>');
}
else {
alert('亲,不能再少了!');
}
});
(增加的类似,就不写了)
当测试的时候,发现只可以执行一次,怎么都弄不明白为啥。后来改了一种写法:
<li><span class="decs">-</span><span>1</span><span class="incs">+</span><li>
$('.decs').click(function() {
var num = $(this).next('span').text();
num = parseInt(num);
if(num > 1){
$(this).next('span').text(num - 1);
}
else {
alert('亲,不能再少了!');
}
});
这样写代码又简洁还可以实现功能!
这让我发现,HTML的结构很重要,如果结构写的好,可以省好多事。同时,也给了我另一个思路,就是在当前情况无法解决问题的时候,可以试着从别的地方找突破点!
大家一起努力学习呀!
(只写主要代码,样式不写了)
<li><span class="decs">-</span>1<span class="incs">+</span><li>
当写jQuery的时候就出现了问题,
// 减少的代码
$('.decs').click(function() {
var num = $(this).parent('li').text();
num = parseInt(num);
// 因为获得的num不只有数字,还有前边的“-”号
num = 0 - num;
if(num > 1){
$(this).parent('li').html('<span class="decs">-</span>'+ (num - 1)
+ '<span class="incs">+</span>');
}
else {
alert('亲,不能再少了!');
}
});
(增加的类似,就不写了)
当测试的时候,发现只可以执行一次,怎么都弄不明白为啥。后来改了一种写法:
<li><span class="decs">-</span><span>1</span><span class="incs">+</span><li>
$('.decs').click(function() {
var num = $(this).next('span').text();
num = parseInt(num);
if(num > 1){
$(this).next('span').text(num - 1);
}
else {
alert('亲,不能再少了!');
}
});
这样写代码又简洁还可以实现功能!
这让我发现,HTML的结构很重要,如果结构写的好,可以省好多事。同时,也给了我另一个思路,就是在当前情况无法解决问题的时候,可以试着从别的地方找突破点!
大家一起努力学习呀!