0
何らかのフィルタリングを実行しようとしているので、アイソトープを見てどこも速くなりません。私は文字通り、サイトのCodepen部分からHTML、CSS、JSをコピーしましたが、JS/Jquery機能はまったく使用できません。ここに元のCodePenがあります：https://codepen.io/desandro/pen/Ehgijアイソトープ（JS）が機能しない
これは私の努力です。私はDjangoでこれを実行しています。はい、JSがオンラインでCDNを指しているので、静的ファイルがロードされています（！）。
おそらく私はスクリプトを使用して非常に愚かな何かをやっているので、JSの機能EXCEPT負荷罰金すべて...
{% load static %}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script>
<link type="text/css" rel="stylesheet" href="{% static 'css/isotope-docs.css' %}">
</head>
<script>
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows'
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt(number, 10) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match(/ium$/);
}
};
// bind filter button click
$('.filters-button-group').on('click', 'button', function() {
var filterValue = $(this).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each(function(i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
</script>
<div class="big-demo go-wide" data-js="sorting-demo">
<div class="button-group sort-by-button-group js-radio-button-group">
<button class="button is-checked" data-sort-by="original-order">original order</button>
<button class="button" data-sort-by="name">name</button>
<button class="button" data-sort-by="symbol">symbol</button>
<button class="button" data-sort-by="number">number</button>
<button class="button" data-sort-by="weight">weight</button>
<button class="button" data-sort-by="category">category</button>
</div>
<div class="grid">
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Mercury</h5>
<p class="symbol">Hg</p>
<p class="number">80</p>
<p class="weight">200.59</p>
</div>
<div class="element-item metalloid " data-category="metalloid">
<h5 class="name">Tellurium</h5>
<p class="symbol">Te</p>
<p class="number">52</p>
<p class="weight">127.6</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h5 class="name">Bismuth</h5>
<p class="symbol">Bi</p>
<p class="number">83</p>
<p class="weight">208.980</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h5 class="name">Lead</h5>
<p class="symbol">Pb</p>
<p class="number">82</p>
<p class="weight">207.2</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Gold</h5>
<p class="symbol">Au</p>
<p class="number">79</p>
<p class="weight">196.967</p>
</div>
<div class="element-item alkali metal " data-category="alkali">
<h5 class="name">Potassium</h5>
<p class="symbol">K</p>
<p class="number">19</p>
<p class="weight">39.0983</p>
</div>
<div class="element-item alkali metal " data-category="alkali">
<h5 class="name">Sodium</h5>
<p class="symbol">Na</p>
<p class="number">11</p>
<p class="weight">22.99</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Cadmium</h5>
<p class="symbol">Cd</p>
<p class="number">48</p>
<p class="weight">112.411</p>
</div>
<div class="element-item alkaline-earth metal " data-category="alkaline-earth">
<h5 class="name">Calcium</h5>
<p class="symbol">Ca</p>
<p class="number">20</p>
<p class="weight">40.078</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Rhenium</h5>
<p class="symbol">Re</p>
<p class="number">75</p>
<p class="weight">186.207</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h5 class="name">Thallium</h5>
<p class="symbol">Tl</p>
<p class="number">81</p>
<p class="weight">204.383</p>
</div>
<div class="element-item metalloid " data-category="metalloid">
<h5 class="name">Antimony</h5>
<p class="symbol">Sb</p>
<p class="number">51</p>
<p class="weight">121.76</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Cobalt</h5>
<p class="symbol">Co</p>
<p class="number">27</p>
<p class="weight">58.933</p>
</div>
<div class="element-item lanthanoid metal inner-transition " data-category="lanthanoid">
<h5 class="name">Ytterbium</h5>
<p class="symbol">Yb</p>
<p class="number">70</p>
<p class="weight">173.054</p>
</div>
<div class="element-item noble-gas nonmetal " data-category="noble-gas">
<h5 class="name">Argon</h5>
<p class="symbol">Ar</p>
<p class="number">18</p>
<p class="weight">39.948</p>
</div>
<div class="element-item diatomic nonmetal " data-category="diatomic">
<h5 class="name">Nitrogen</h5>
<p class="symbol">N</p>
<p class="number">7</p>
<p class="weight">14.007</p>
</div>
<div class="element-item actinoid metal inner-transition " data-category="actinoid">
<h5 class="name">Uranium</h5>
<p class="symbol">U</p>
<p class="number">92</p>
<p class="weight">238.029</p>
</div>
<div class="element-item actinoid metal inner-transition " data-category="actinoid">
<h5 class="name">Plutonium</h5>
<p class="symbol">Pu</p>
<p class="number">94</p>
<p class="weight">(244)</p>
</div>
</div>
*疑いを回避するための編集、私は私が意味する、「何も起こらない」と言います文字通り、フィルタをクリックすると何も起こりません。 firefox devコンソールのエラーもありません。
「機能していません」とは、技術用語または説明ではありません。 – Rob
フィルタをクリックすると、表示されているオブジェクトがフィルタリングされます。クリックしても何も起こりません。デベロッパーコンソールにもエラーはありません。 – charliedontsurf
あなたの質問ではなく、コメントに入れてください。 – Rob