やりたいこと
コンテンツの順序をランダムにし、それをフィルター機能で出しわけしたいです。
詳細
コンテンツの順序をランダムで入れ替える機能、フィルター機能の単体だと実装可能なのですが、
この二つを合わせると、フィルター機能の方がうまく動作しません。
→ランダムで表示されるが、フィルターが意図しているグループにいかない。
下記コードだと、カテゴリー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++; });});
0 コメント