I have the following problem. I have 3 elements label
and I want, according to the radiobutton
option chosen to filter them.
The problem is that when I want to filter by the name that ends in -ivo does not work, but the rest does.
Here is the HMTL code:
<p class="filters">
<label>
<input type="radio" name="filter" value="*" checked="checked" /> show all
</label>
<label>
<input type="radio" name="filter" value="ivo" /> nome que acaba em ivo
</label>
<label>
<input type="radio" name="filter" value="iva" /> nome que acaba em iva
</label>
</p>
<div class="grid">
<div class="element-item transition metal " data-category="transition">
<h3 class="name">Passiva</h3>
<p class="symbol"></p>
<p class="number"></p>
<p class="weight"></p>
</div>
<div class="element-item metalloid " data-category="metalloid">
<h3 class="name">Passiva</h3>
<p class="symbol"></p>
<p class="number"></p>
<p class="weight"></p>
</div>
<div class="element-item transition metal " data-category="transition">
<h3 class="name">Agressivo</h3>
<p class="symbol"><p>
<p class="number"></p>
<p class="weight"></p>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js'></script>
and JS
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows'
});
// filter functions
var filterFns = {
// show if name ends with -ium
iva: function() {
var name = $(this).find('.name').text();
return name.match( /iva$/ );
}
};
var filterFns2 = {
sivo: function() {
var name2 = $(this).find('.name').text();
return name2.match( /ivo$/ );
}
};
// bind filter on radio button click
$('.filters').on( 'click', 'input', function() {
// get filter value from input value
var filterValue = this.value;
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});