想要实现某种过滤，所以已经开始关注同位素并且无处可寻。我从网站的Codepen部分复制了HTML，CSS和JS，但根本无法获得JS / Jquery功能。这是原始CodePen：https://codepen.io/desandro/pen/Ehgij
这是我的努力。我在Django上运行它，是的，我的静态文件正在加载（！）并不重要，因为JS指向CDN在线。
除了JS功能之外，一切都很好，所以我可能会对脚本做一些非常愚蠢的事情...
{% load static %}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/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>
*编辑以避免怀疑，当我说＆＃34;没有任何反应＆＃34;我的意思是，当你点击过滤器时，没有任何反应。 firefox开发者控制台也没有错误。
答案 0 :(得分：0)
好的，我去散步，做了一些购物，回来了，并且有一个非常微小的脑波 - 将脚本放在身体的底部，现在它可以工作了。咦。