Question

我正在尝试将JQuery值传递给隐藏的文本框（稍后作为表单发送）以及divs t

帽子显示在前端。我还想在将值传递给它们时计算这些项目。我有Frankensteined这段代码，它将值传递给输入框和div，它也会点击它们。我只是努力在#total_div中显示总和。有人能指出我正确的方向吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#my_div').click(function() {
$('#my_value_1').val("100");
$('#my_value_1_div').html( "100" );
$('#my_div').click(addNumbers('total'));
});
});

$(document).ready(function(){
$('#my_div_2').click(function() {
$('#my_value_2').val("200");
$('#my_value_2_div').html( "200" );
$('#my_div_2').click(addNumbers('total'));
});
});

function addNumbers()
{
var val1 = parseInt(document.getElementById("my_value_1").value);
var val2 = parseInt(document.getElementById("my_value_2").value);
var ansD = document.getElementById("total");
ansD.value = val1 + val2;
}
</script>

 <h2>My pretty front end</h2>

<div id="my_div">ADD THIS VALUE 1</div>

<div id="my_div_2">ADD THIS VALUE 2</div>

VALUE 1: <div id="my_value_1_div">VALUE 1 GOES HERE</div>

VALUE 2: <div id="my_value_2_div">VALUE 2 GOES HERE</div>

TOTAL: <div id="total_div">SUM MUST GO HERE</div>

<h2>My hidden Form</h2>

Value 1: <input type="text" id="my_value_1" name="my_value_1" value="0"/>
Value 2: <input type="text" id="my_value_2" name="my_value_2" value="0"/>
<input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/>
Total: <input type="text" id="total" name="total" value=""/>

修改

好的，感谢上述工作的建议，但现在我需要清理金额。这就是我所做的，它几乎就在我想到的但是我收到了不正确的金额。

$('#clear').click(function() {
$('#my_value_1').val('0');
$('#my_value_1_div').html( "0" );
$('#clear').click(minusNumbers('total'));
 });    

function minusNumbers()
{
var minval1 = parseInt(document.getElementById("my_value_1").value);
var minval2 = parseInt(document.getElementById("total").value);
var minansD = document.getElementById("total");
minansD.value = minval2 - minval1;
$('#total_div').text(minansD.value);
}

Answer 1

取代：

function addNumbers()
{
var val1 = parseInt(document.getElementById("my_value_1").value);
var val2 = parseInt(document.getElementById("my_value_2").value);
var ansD = document.getElementById("total");
ansD.value = val1 + val2;
}

使用：

function addNumbers()
{
var val1 = parseInt(document.getElementById("my_value_1").value);
var val2 = parseInt(document.getElementById("my_value_2").value);
var ansD = document.getElementById("total");
ansD = val1 + val2;
$('#total').val(ansD);
}

Answer 2

更新#total_div功能中的addNumber文字，

function addNumbers()
{
var val1 = parseInt(document.getElementById("my_value_1").value);
var val2 = parseInt(document.getElementById("my_value_2").value);
var ansD = document.getElementById("total");
ansD.value = val1 + val2;
$('#total_div').text(ansD.value);
}

Demo

Answer 3

点击（的addNumbers（＆＃39;总＆＃39;））;首先使用未使用的参数调用addNumbers＆＃39; total＆＃39;然后获取addNumbers（null或undefined）的返回值，并将其设置为下一次单击的click（）处理程序。

我想你可能意味着

$('#my_div').click(addNumbers);

这意味着＆＃34;运行下面定义的addNumbers函数，下次单击my_div＆＃34;。

或只是

addNumbers();

这意味着＆＃34;现在运行addNumbers函数＆＃34; （在第一次点击时）

请注意，当您单击并调用addNumbers时，其中一个数字可能尚未复制，因此您将添加100 +＆＃34;＆＃34;或者＆＃34;＆＃34; +200所以你真的要考虑你想做什么。

将JQuery值传递给html，然后使用onclick计算总数

3 个答案:

Demo