以下のように複数のボタンがHTML上にあるとします。
<button name="item1" onclick="foo()">商品1</button>
<button name="item2" onclick="foo()">商品2</button>
<button name="item3" onclick="foo()">商品3</button>
ボタンが押されると、foo()
が実行されます。
このとき、何番目のボタンが押されたかを取得したい場合に、data-xxx
を使うと便利です。
<button data-index="1" name="item1" onclick="foo()">商品1</button>
<button data-index="2" name="item2" onclick="foo()">商品2</button>
<button data-index="3" name="item3" onclick="foo()">商品3</button>
上記で商品1
をクリックした場合
foo(e) {
// datasetは、data-xxxで指定されたオブジェクトになる
// {index:1}
const data = e.currentTarget.dataset['index']; // 1が返される
}
data-xxx
を増やすと
<button data-id="foo" data-index="1" name="item1" onclick="foo()">商品1</button>
<button data-id="bar" data-index="2" name="item2" onclick="foo()">商品2</button>
<button data-id="baz" data-index="3" name="item3" onclick="foo()">商品3</button>
foo(e) {
// datasetは、data-xxxで指定されたすべてが入る
// {id:"foo", index:1}
const data = e.currentTarget.dataset['id']; // fooが返される
}