1

次の DOM 要素があるとします。

<span class=itemNumber>10</span>

数値を変数に格納し、それを整数に変換し、それに 1 を追加して、DOM で更新したいと考えています。

クリックイベントにバインドされたこの関数でそれをやろうとしました:

var itemCount = parseInt($('.itemNumber').text())+1;
$('.itemNumber').html(itemCount);

十分に単純に思えますが、結果は私が期待しているものではありません。古い「10」の数字を「11」に置き換える代わりに、「1011」と表示します。.html() の前に .empty() 関数を使用してみましたが、同じ結果です。

変数は実際には数値を格納しているのではなく、要素への参照を格納していると思われます。

何か案は？

4

3 に答える 3

1

あなたのコードは完全に有効に見えます。しかし、これはtext(func)構文の典型的な使い方です。

$('.itemNumber').click(function() {
    $(this).text(function (_, val) {
        return +val + 1;
    });
});

デモ

あなたの問題は、複数のハンドラーがあり、ハンドラー.itemnumberで使用しないと両方が選択される可能性があることです。$(this)そして、$('.itemNumber').text()両方の数字を一緒に与えます（両方の内部テキスト）と言う1010と、それはインクリメントされ、代わりに1として結果が得られます。101111

ここでフィドルを参照してくださいhttp://jsfiddle.net/a4ry4/

したがって、修正は、クリックされたインスタンスをハンドラーで単独で使用してテキストを選択することです。

var itemCount = parseInt($(this).text(), 10)+1;
$(this).html(itemCount);
于 2013-07-02T19:49:17.480 に答える
0

アイテムのテキストとして使用する前に、itemCount を文字列に変換することをお勧めします。

$('.itemNumber').text(itemCount.toString());
于 2013-07-02T19:55:52.563 に答える
0

この.text関数はミューテーター関数を取ることができます:

$('.itemNumber').text(function(_, txt) {
    return parseInt(txt, 10) + 1;
});
于 2013-07-02T19:48:44.560 に答える