質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

フィルター機能+ランダム配列の実装

hrnkmhmdmyk
hrnkmhmdmyk

総合スコア2

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

0クリップ

158閲覧

投稿2022/07/01 07:49

やりたいこと
コンテンツの順序をランダムにし、それをフィルター機能で出しわけしたいです。

詳細
コンテンツの順序をランダムで入れ替える機能、フィルター機能の単体だと実装可能なのですが、
この二つを合わせると、フィルター機能の方がうまく動作しません。
→ランダムで表示されるが、フィルターが意図しているグループにいかない。
下記コードだと、カテゴリー1に3個、カテゴリー2に2個のコンテンツなのですが、カテゴリーごとの個数は合うのですが別カテゴリーのものが入ってしまいます。

コンテンツはvue.jsを使いjsonを呼び出しています。
こだわりはないので、コンテンツをランダム表示+フィルター機能の実装ができるのであればhtmlに記載でも問題ございません。

コンテンツの順序をランダムにするものと、フィルター機能のコードを別々で書いているのが問題なのかなとは思うのですが、何をなおせばいいかわからず。。。
どなたかご教示願えれば幸いです。
よろしくおねがいいたします。

HTML

<body> <div class="article"> <!-- フィルター機能 --> <div class="filters article__filter"> <input type="radio" name="categories" id="All" value="All" checked> <label for="All"> All </label> <input type="radio" name="categories" id="category1" value="category1"> <label for="category1"> category1 </label> <input type="radio" name="categories" id="category2" value="category2"> <label for="category2"> category2 </label> </div> <!-- ランダムで出したいコンテンツ --> <div id="card-unit" class="article__lists"> <div class="article__list" v-for="Card in Cards" :data-category="Card.category"> <a class="card" :href="Card.link"> <ul class="details article__detail"> <li class="category">{{Card.category}}</li> <li class="company">{{Card.name}}</li> </ul> </a> </div> </div> </div> <!-- jsonの呼び出し --> <script> var app = new Vue({ el: '#card-unit', data: { Cards: [] }, created: function () { var self = this; $.getJSON('card.js', function (data) { self.Cards = data; }); } }); </script> </body>

json

[ { "category": "category1", "name": "名前1" }, { "category": "category2", "name": "名前2" }, { "category": "category1", "name": "名前3" }, { "category": "category2", "name": "名前4" }, { "category": "category1", "name": "名前5" } ]

JavaScript

// フィルター機能 window.addEventListener('DOMContentLoaded', function () { const input_categories = document.querySelectorAll("input[name=categories]"); const targets = document.querySelectorAll(".article__list"); for (let input_category of input_categories) { input_category.addEventListener('change', function () { for (let target of targets) { target.style.setProperty('display', 'block'); } if (this.checked) { if (this.value !== 'All') { const not_checked_categories = document.querySelectorAll('.article__list:not([data-category~=' + '"' + this.value + '"])'); for (let not_checked_category of not_checked_categories) { not_checked_category.style.setProperty('display', 'none'); } } } }); } }); // ランダム配列 $(function () { var randomContent = []; $('.card').each(function () { randomContent.push($(this).html()); }); randomContent.sort(function () { return Math.random() - Math.random(); }); $('.card').empty(); i = 0; $('.card').each(function () { $(this).append(randomContent[i]); i++; }); });

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。