Question

再一次，要在开始时清楚，我没有接受过javascript训练...所以请原谅我对语言的无知

我正在尝试在我的网站上创建一个表单，根据客户使用Javascript选择的每个项目的总数来计算项目的总价值。表格旁边显示的每个总计和表格末尾的总计将在他输入每个项目数量时更新。

例如

;

衬衫：选择数量2和200将显示在它旁边@ 200每件衬衫

裤子：选择数量3和450将显示在它旁边@ 150每裤子

牛仔裤：选择数量1和200将显示在它旁边@ 200每裤子

总价值850（（2 x 100）+（3 x 150））将显示在表格

下方

当客户输入他选择的每件商品时，此总额必须更新并显示在表格底部

我拥有的是：

HTML

<p><span>Shirt/s </span><input type="number" name="Shirts" placeholder="Shirt/s" value="0" id="shirts">&nbsp;&nbsp;<span class="shirtscost">0</span><br></p>        
<p><span>Trousers </span> <input type="number" name="Trousers" placeholder="Trousers" value="0" id="trousers">&nbsp;&nbsp;<span class="trouserscost">0</span><br></p>
<p><span>Jeans  </span> <input type="number" name="Jeans" placeholder="Jeans"   value="0" id="jeans">&nbsp;&nbsp;<span class="jeanscost">0</span><br></p>

<div id="totalcost"></div>

JS

    var x = 0;
    var y1 = 0;
    var y2 = 0;
    var y3 = 0;


    $("#shirts").keyup(function(){
    var x = $('#shirts').val();
    //alert(x);     
    var y1 = x * 49;
    $(".shirtscost").css("background-color", "pink").html("Rs."+y1);

});
    $("#trousers").keyup(function(){
    var x = $('#trousers').val();
    //alert(x);     
    var y2 = x * 49;
    $(".trouserscost").css("background-color", "pink").html("Rs."+y2);
});
    $("#jeans").keyup(function(){
    var x = $('#jeans').val();
    //alert(x);     
    var y3 = x * 49;
    $(".jeanscost").css("background-color", "pink").html("Rs."+y3);

});
var tot=y1 + y2 + y3 + y4 + y5 + y6 + y7+ y8 + y9 + y11;
    $("#totalcost").css("background-color", "pink").html("Rs."+tot);

显然这不起作用，因为我认为每个函数中的变量及其值都没有被访问过。我尝试将最后两行放在每个函数中。但这只给出了总面积中的个人总数。

如何在每个项目的输入字段中输入每个数量时，如何将所有单独的y1，y2和y3值加在“totalcost”div中？

Answer 1

创建一个计算和渲染总计的函数，并从其他每个keyup侦听器调用该函数，例如

$("#shirts").keyup(function(){
    var x = $('#shirts').val();
    //alert(x);     
    var y1 = x * 49;
    $(".shirtscost").css("background-color", "pink").html("Rs."+y1);
    total();

});

$("#trousers").keyup(function(){
    var x = $('#trousers').val();
    //alert(x);     
    var y2 = x * 49;
    $(".trouserscost").css("background-color", "pink").html("Rs."+y2);
    total();
});
$("#jeans").keyup(function(){
    var x = $('#jeans').val();
    //alert(x);     
    var y3 = x * 49;
    $(".jeanscost").css("background-color", "pink").html("Rs."+y3);

    total();
});

function total () {
    var total = $('#shirts').val()*49 + $('#trousers').val()*49 + $('#jeans').val()*49;

    $("#totalcost").css("background-color", "pink").html("Rs."+total);
}

Answer 2

你差不多正确。

var x = 0;
var y1 = 0;
var y2 = 0;
var y3 = 0;

这里你已经在全局空间中声明了变量，但是你在函数内部重新声明了它们。

$("#trousers").keyup(function(){
    var x = $('#trousers').val();
    //alert(x);     
    var y2 = x * 49; // remove var and simply write y2 = x * 49
    $(".trouserscost").css("background-color", "pink").html("Rs."+y2);
});

你必须删除函数内的var。

在keyup {j}期间在javascript中添加来自不同函数的变量

2 个答案: