我的意思就是,一个页面可以使用同一个js多次
如:再复制一份<p><span>会员价:</span><em>¥</em><span id="price">3.50</span></p>
<input type="button" value="-" id="min"/>
<input type="text" value="1" id="num" disabled="disabled"/>
<input type="button" value="+" id="max"/>
<label id="tips"></label>
<p><span>共计金额:</span><em>¥</em><span id="sum"></span></p>
如:再复制一份<p><span>会员价:</span><em>¥</em><span id="price">3.50</span></p>
<input type="button" value="-" id="min"/>
<input type="text" value="1" id="num" disabled="disabled"/>
<input type="button" value="+" id="max"/>
<label id="tips"></label>
<p><span>共计金额:</span><em>¥</em><span id="sum"></span></p>
<p><span>会员价:</span><em>¥</em><span class="price">3.50</span>
</p>
<input type="button" value="-" class="min" />
<input type="text" value="1" class="num" disabled="disabled" />
<input type="button" value="+" class="max" />
<label class="tips"></label>
<p><span>共计金额:</span><em>¥</em><span class="sum"></span>
</p>
</div>
<div class='two'>
<p><span>会员价:</span><em>¥</em><span class="price">4.50</span>
</p>
<input type="button" value="-" class="min" />
<input type="text" value="1" class="num" disabled="disabled" />
<input type="button" value="+" class="max" />
<label class="tips"></label>
<p><span>共计金额:</span><em>¥</em><span class="sum"></span>
</p>
</div>
$(document).ready(function() {
function sum($father) {
var $sum = $father.find('.sum');
var price = parseFloat($father.find('.price').html()).toFixed(2);
var num = parseInt($father.find('.num').val());
var sum = price * num;
$sum.html(sum);
}
$(".min").click(function() {
var $father = $(this).parent();
if (num.val() <= 1) {
$(".tips").html("*对不起,商品数量最小为1哦!");
} else {
$father.find(".num").val(parseInt(num.val()) - 1);
sum($father);
}
});
//add
$(".max").click(function() {
var $father = $(this).parent();
$father.find(".num").val(parseInt(num.val()) + 1)
sum($father);
$(".tips").remove();
});
});
function sum($father) {
var $sum = $father.find('.sum');
var price = parseFloat($father.find('.price').html()).toFixed(2);
var num = parseInt($father.find('.num').val());
var sum = price * num;
$sum.html(sum);
}
$(".min").click(function() {
var $father = $(this).parent();
if (num.val() <= 1) {
$(".tips").html("*对不起,商品数量最小为1哦!");
} else {
$father.find(".num").val(parseInt($father.find(".num").val()) - 1);
sum($father);
}
});
//add
$(".max").click(function() {
var $father = $(this).parent();
$father.find(".num").val(parseInt($father.find(".num").val()) + 1)
sum($father);
$(".tips").remove();
});
});
我以为用$(this)搞呢....呵呵,,
var num=$(".num");
$(".sum").html((parseInt(num.val()))*(parseFloat(price.html())));
<div class='one'>
<p><span>会员价:</span><em>¥</em><span class="price">3.50</span>
</p>
<input type="button" value="-" class="min" />
<input type="text" value="1" class="num" disabled="disabled" />
<input type="button" value="+" class="max" />
<label class="tips"></label>
<p><span>共计金额:</span><em>¥</em><span class="sum"></span>
</p>
</div>
<div class='one'>
<p><span>会员价:</span><em>¥</em><span class="price">4.50</span>
</p>
<input type="button" value="-" class="min" />
<input type="text" value="1" class="num" disabled="disabled" />
<input type="button" value="+" class="max" />
<label class="tips"></label>
<p><span>共计金额:</span><em>¥</em><span class="sum"></span>
</p>
</div>然后就可以:$(".one").each(function(){}); 这样写就可以了呀,在这个里面用$(this).find()去查找相应的对象即可!!
.tips{padding:5px 10px;background:#9F6;border:1px #CCC solid;color:#3d3d3d;}
.price,.sum{font-weight:bold;font-size:16px;color:#F00;}
em{font-style:normal;font-weight:bold;}
.num{width:30px;text-align:center;}
<div class="cal">
<p>
<span>会员价:</span><em>¥</em>
<span class="price">3.50</span>
</p>
<input type="button" value="-" class="min"/>
<input type="text" value="1" class="num" disabled="disabled"/>
<input type="button" value="+" class="max"/>
<label class="tips"></label>
<p>
<span>共计金额:</span><em>¥</em>
<span class="sum"></span>
</p>
</div>
<div class="cal">
<p>
<span>会员价:</span><em>¥</em>
<span class="price">3.50</span>
</p>
<input type="button" value="-" class="min"/>
<input type="text" value="1" class="num" disabled="disabled"/>
<input type="button" value="+" class="max"/>
<label class="tips"></label>
<p>
<span>共计金额:</span><em>¥</em>
<span class="sum"></span>
</p>
</div>
$(document).ready(function () {
function sum($parent) {
var price = parseFloat($parent.find(".price").html());
var num = parseInt($parent.find(".num").val());
var sum = parseFloat(price * num).toFixed(2);
$parent.find(".sum").html(sum);
} $(".min").click(function () {
var $parent = $(this).parent();
var $num = $parent.find(".num");
var num = parseInt($num.val());
if (num <= 1) {
$parent.find(".tips").html("数量不能少于1哦!").show();
} else {
num --;
$num.val(num);
$parent.find(".tips").hide();
}
sum($parent);
}); $(".max").click(function () {
var $parent = $(this).parent();
var $num = $parent.find(".num");
var num = parseInt($num.val());
$num.val(++num);
sum($parent);
$parent.find(".tips").hide();
})
$(".tips").hide();
$(".cal").each(function () {
sum($(this));
});})