【发布时间】：2017-10-30 01:18:36
【问题描述】：
希望实现某种过滤，因此开始关注同位素，但进展缓慢。我已经从网站的 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>
*为避免疑问，当我说“什么都没有发生”时，我的意思是，当您单击过滤器时，实际上什么都没有发生。 Firefox 开发控制台中也没有错误。
【问题讨论】：
-
“不工作”不是技术术语或描述。
-
当你点击一个过滤器时，它应该过滤显示的对象。点击什么都没有发生，什么都没有。在开发者控制台中，也没有错误。
-
把它放在你的问题中，而不是 cmets。
-
已修复，谢谢。我猜是愚蠢的问题。
标签： jquery-isotope