为什么我写的这个js一个页面只能用一次？求解

Question

我的意思就是，一个页面可以使用同一个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>

Answer 1

我意思是各管各的点击第一个+-第一个文本框变动，第二个，第二个变动...换成class等于点击一个两个都变了，

Answer 2

计算的时候传个参数，获取对应参数的价格与数量进行计算。<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='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();
});
});

Answer 3

刚刚那个js有点问题，没有完全改完。$(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($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();
});
});

Answer 4

太感谢你了....我好好看看....
我以为用$(this)搞呢....呵呵,,

Answer 5

因为上面那个代码只在单击事件里调用了sum（），初始化调用一下不就可以了

Answer 6

因为上面那个代码只在单击事件里调用了sum（），初始化调用一下不就可以了怎么写呢？就您写的这个例子上我刚学，会简单的....求教...

Answer 7

因为上面那个代码只在单击事件里调用了sum（），初始化调用一下不就可以了我第一个简单的就是讲sum()放在了外面就可以了，不晓得这个怎么不行了呢？为什么？

Answer 8

因为上面那个代码只在单击事件里调用了sum（），初始化调用一下不就可以了哦。出来了。。这样对不对？哈哈。反正貌似可以显示咯非常感谢var price=$(".price");
var num=$(".num");

    $(".sum").html((parseInt(num.val()))*(parseFloat(price.html())));

Answer 9

你可以把这个东西写成一个插件呀，到时就可以多次调用了呀。如果不想写成插件，那就用each 方法呀，
<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()去查找相应的对象即可！！

Answer 10

jquery 新手，根据 7# 的启发，完善了一下代码，希望对你有帮助。*{font-family:'Microsoft YaHei';font-size:12px;}
.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));
    });})

Answer 11

 帅，哈哈，就是这个效果我最近就被绊在这个this上，不晓得咋整...