0

2 つの div 内の値を掛けて、3 分の 1 に積を入れようとしていますが、失敗しています。ここで前の質問の方法に従おうとしましたが、うまくいかないようです。

具体的には、行と列の数を変更するための「追加」および「減算」コントロールがあります (後で操作します)。他のセルのいずれかが変更されたときに、セルの数 (行 * 列) を自動的に更新しようとしています。

ここにフィドルがあります。私が使用しているコードは次のとおりです。

<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()キーボードのキーではなくマウスを使用しているため、 を使用します。また、はand要素val()にのみ関連します。使用:inputtextareatext()

$('#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()、名前が示すように、浮動小数点数も処理します。

page-load/document-ready の合計を更新するには、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

わかりました、あなたの問題が何であるかがわかると思います。$.val() を使用して div 内のテキストを取得しようとしています。$.val() は、入力要素の値属性を返します。$.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 に答える