Question

我正在尝试将两个div中的值相乘并将产品放在第三个中，而我却失败了。我试图按照a previous question here中的方法进行操作，但它似乎对我没用。

具体来说，我有“添加”和“减去”控件来更改行和列的数量（稍后再使用）。我正在尝试在其他任何一个更改时自动更新单元格数（行*列）。

here's the fiddle。我正在使用的代码是：

<table id="controls">
<tr><td>Rows:</td><td><input type="button" value="+" onclick="javascript:appendRow()" class="append_row"/><input type="button" value="-" onclick="javascript:deleteRow()" class="delete"/></td><td class="numbers" id="numRows">2</td></tr>
<tr><td>Columns:</td><td><input type="button" value="+" onclick="javascript:appendColumn()" class="append_column"/><input type="button" value="-" onclick="javascript:deleteColumn()" class="delete"/></td><td class="numbers" id="numColumns">2</td></tr>
<tr>
<td colspan="2">Total cells:</td><td class="numbers" id="rc-product"></td></tr>
</table>

$('#controls').keyup(function(){
var rows_val = $('#numRows').val();
var columns_val = $('#numColumns').val();
$('#rc-product').val( rows_val * columns_val);
});

但没有任何东西在显示。我应该使用parseInt和text（）吗？怎么样？

Answer 1

使用click()，因为您使用的是鼠标，而不是键盘键。此外，val()仅与input和textarea元素相关。使用text()：

$('#controls').click(function () {
    var rows_val = parseFloat($('#numRows').text()),
        columns_val = parseFloat($('#numColumns').text());
    $('#rc-product').text(rows_val * columns_val);
});

JS Fiddle demo

使用parseFloat()将文本的字符串从元素转换为可用于数学运算的数字（或NaN，如果字符串以非数字字符开头）。可以使用parseInt()代替，但是这会将你限制为整数，而顾名思义，parseFloat()也会处理浮点数。

要更新页面加载/文档就绪的总数，您还可以使用click()（不带参数）来触发click事件，这将调用先前绑定的点击处理程序：

$('#controls').click(function () {
    var rows_val = parseFloat($('#numRows').text()),
        columns_val = parseFloat($('#numColumns').text());
    $('#rc-product').text(rows_val * columns_val);
});

JS Fiddle demo

参考文献：

Answer 2

当你在键盘上释放一个键时会触发keyup事件，所以这可能不是你想要的。为了在单击其中一个按钮时触发您的乘法功能，您需要使用click事件。

此外，要获取或设置DOM元素的内部内容，您应使用text（或html，如果您也想在其中选择HTML标记）方法而不是{{ 1}}。

val

小提琴：http://jsfiddle.net/gwv2n/8/

如果您希望在页面加载中评估您的函数，那么乘法结果已经显示在页面加载上，您可以将其转换为命名函数并在$('#controls').on('click', 'input[type=button]', function() { var rows_val = $('#numRows').text(); var columns_val = $('#numColumns').text(); $('#rc-product').text(rows_val * columns_val); });事件上运行它。

$(document).ready

小提琴：http://jsfiddle.net/gwv2n/12/

Answer 3

好的，我想我知道你的问题是什么。您正在尝试使用$ .val（）来检索div中的文本。 $ .val（）返回input元素的value属性。使用$ .text（）将解决此问题。

请参阅此更新的小提琴：http://jsfiddle.net/gwv2n/10/

您还需要将所有逻辑放在文档就绪函数中，如下所示：

$(function() {
  $('#controls input[type="button"]').click(function(){
    var rows_val = $('#numRows').text();
    var columns_val = $('#numColumns').text();
    $('#rc-product').text( rows_val * columns_val);
    console.log(rows_val, columns_val);
  });
});

jQuery乘法对我不起作用

3 个答案: