カスタムデータ属性の値について

html5のカスタムデータ属性について、
javascriptでデータ属性の値を判別して、処理をさせたいのですが、データ属性の値をif文にするとき、どういう風に取得させればよいのでしょうか？

例
data-id=1

データ属性が1のとき、
処理をする。

行動規範の内容に同意します

回答2件

data-*属性の値を取得するという動作は、data関数で実現することができます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<input type="button" value="クリック" data-id="1">
15<input type="button" value="クリック" data-id="2">
16<input type="button" value="クリック" data-id="3">
17<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
18<script>
19    $("input[type='button']").on("click", function () {
20        if ($(this).data("id") === 1) {
21            alert("1です");
22        } else {
23            alert("1ではない: " + $(this).data("id"));
24        }
25    });
26</script>
27</body>
28</html>

投稿2017/04/01 11:42

s8_chu

総合スコア14731

datasetかgetAttribute()を使用して取得してください。
datasetの方が、カスタムデータの読み取り用に用意されたプロパティです。

HTMLElement.dataset

html
1<div class="target" data-id="1"></div>

javascript
1const target = document.querySelector('.target');
2const id = target.dataset.id; // datasetを利用して取得
3const dataId = target.getAttribute('data-id'); // getAttributeを利用して取得
4
5console.log(id, dataId); // 1
6
7if(id === '1') {
8  // 処理
9}