javascript - クラス名でクリックしてアイテムを数える

Question

eショップバスケットを作りたいので、購入ボタンを押したときにアイテムをカウントアップしたいです。getElementByIdを使用して、バスケット内のidの名前を単純に呼び出してみました。

-

<script type="text/javascript">
    var index = 0;
</script>

上部のどこか-----

<div>items :<input type="text" id="tb" style="width: 20px; color:green; font-weight:bold; border:none; background: none; margin-left:20px;"/></div>

購入ボタンを押すと-------

<input  name="button" type="submit" value="add to basket" onClick="index = index + 1;document.getElementById('tb').value = index;" />

だからこれはうまくいきました..しかし、バスケットを複製してページに2回（上部と最後に）入れたいので、同じIDをもう一度呼び出そうとすると、機能しません（一意性のため） idの）。クラス名isteadを使うべきだと思いますが、方法がわかりません。

私は解決策を望んでいるjsに不慣れです。ありがとう

Answer 1

document.getElementById('tb').value = index2 番目の (一意の) IDを複製して使用できます。または、 を反復処理しdocumnet.getElementsByName('elementsname')ますinputが、name属性が必要です。

Answer 2

ID の代わりにクラスを使用します。

<div>items :<input type="text" class="tb" style="width: 20px; color:green; font-weight:bold; border:none; background: none; margin-left:20px;"/></div>

次に、そのクラスを持つアイテムを反復処理します。

function tb_increment() {
    index++;
    tbs = document.getElementsByClassName("tb");
    for (var i = 0; i < tbs.length; i++) {
        tbs[i].value = index;
    }
}

次に、クリック ハンドラーでこの関数を使用します。

<input  name="button" type="submit" value="add to basket" onClick="tb_increment();" />

Answer 3

このサンプル コード パターンを試してください。

$(".class").each(function(){ index++; });
$("#tb").val(index);