質問編集履歴

1 補足の追加

Bonito_Bonito

Bonito_Bonito score 65

2018/06/06 18:54  投稿

data属性の値に配列を使用している場合、n番目が特定の値である要素を取得したい。
# 実現したいこと
カスタムデータ属性(data-*)の値に、下記のような配列を使用しております。
`<article data-post='["20180212","publish","admin"]'>...</article>`
ボタンを押した際、そのボタンの `data-trigger` の値と、各<article>のうち `data-post` の3番目の値とが一致している<article>のみに絞り込んで表示したいです。
**./index.html**
```html
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Popular post</title>
</head>
<body>
   <h1>Popular post</h1>
   <button data-trigger='admin'>管理人</button>
   <button data-trigger='k_kaneda'>兼田</button>
   <article data-post='["20180222","publish","k_kaneda"]'>
       <h2>投稿タイトルが入ります。ダミーテキスト</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur pariatur, laboriosam commodi placeat temporibus aperiam.</p>
       <a href="">続きを読む</a>
   </article>
   <article data-post='["20180212","publish","admin"]'>
       <h2>投稿タイトルが入ります。ダミーテキスト</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur pariatur, laboriosam commodi placeat temporibus aperiam.</p>
       <a href="">続きを読む</a>
   </article>
   <article data-post='["20160308","publish","nonchan"]'>
       <h2>投稿タイトルが入ります。ダミーテキスト</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur pariatur, laboriosam commodi placeat temporibus aperiam.</p>
       <a href="">続きを読む</a>
   </article>
   <article data-post='["20171106","publish","admin"]'>
       <h2>投稿タイトルが入ります。ダミーテキスト</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur pariatur, laboriosam commodi placeat temporibus aperiam.</p>
       <a href="">続きを読む</a>
   </article>
   <article data-post='["20180422","publish","admin"]'>
       <h2>投稿タイトルが入ります。ダミーテキスト</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur pariatur, laboriosam commodi placeat temporibus aperiam.</p>
       <a href="">続きを読む</a>
   </article>
   <article data-post='["20170424","publish","nonchan"]'>
       <h2>投稿タイトルが入ります。ダミーテキスト</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur pariatur, laboriosam commodi placeat temporibus aperiam.</p>
       <a href="">続きを読む</a>
   </article>
   <script
   src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   <script type="text/javascript" src="./app.js"></script>
</body>
</html>
```
**./app.js**
```js
$(document).on('click', '[data-trigger]', function() {
   let targetValue = $(this).data('trigger');
   console.log(targetValue); // <= 押されたボタンの値は取れていました
   let post = '[data-post]';
   let target = $(post).data('post')[2].targetValue; // <= ここがうまく行っていません
   // 押されたタブへのクラス付与
   $('[data-trigger]').removeClass('js-active');
   $(this).addClass('js-active');
   // タブで絞り込み
   $(post).hide()
   $(target).show();
});
```
`let target = $(post).data('post')[2].targetValue;` の記述が間違っているためにうまく動作しない様なのですが、試したこととしてそのまま載せております。
押されたボタンの値を3番目に持っている要素を `target` に入れられれば動作する見込みなのですが…
ご助力いただけますと幸いです。
ご助力いただけますと幸いです。
## 補足 : 属性値を配列にしている理由
これまで下記のように複数の `data-*` 属性を指定していました。
- `data-postDate` : 日付の絞り込みのため
- `data-postStatus` : 公開前の記事チェックのため
今回新たに、投稿者による絞り込み機能を追加することが決定したのですが単純に `data-*` 属性を追加すると冗長になってしまうことや、今後、他のページでも属性値を取得して何かしらの処理を加えるといった改修案があるため、一つの `data-*` 属性にまとめられないかという意見のもと、試している次第です。
そのため、要件が満たせるのであれば下記のように配列ではなくオブジェクトの形式でも構いません。
`data-post='{"date":"20180212","status":"publish","author":"admin"}'`
ただしこの場合、記述量が長くなるため、できれば配列で実現したいと考えております。
  • JavaScript

    26508 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    15846 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    10304 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る