0

我试图将两个 div 中的值相乘并将产品放在第三个中，但我失败了。我试图按照上一个问题中的方法here，但它似乎对我不起作用。

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

这是小提琴。我正在使用的代码是：

<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() 吗？如何？

4

3 回答 3

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 小提琴演示。

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

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

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

JS 小提琴演示。

参考：

于 2013-11-12T22:44:04.227 回答
0

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

此外，要获取或设置 DOM 元素的内部内容，您应该使用text(或者html，如果您也想选择其中的 HTML 标签) 方法而不是val.

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

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

如果您也希望在页面加载中评估您的函数，因此乘法结果已经显示在页面加载中，您可以将其转换为命名函数并在$(document).ready事件上运行它。

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

$('#controls').on('click', 'input[type=button]', calculate);
$(document).ready(calculate);

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

于 2013-11-12T22:43:50.973 回答
0

好的，我想我明白你的问题是什么了。您正在尝试使用 $.val() 检索 div 内的文本。$.val() 返回输入元素的 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);
  });
});
于 2013-11-12T22:47:42.600 回答