Eu tenho o seguinte problema. Eu tenho 3 elementos label
e quero, conforme a opção radiobutton
escolhida filtrá-los.
O problema é que quando quero filtrar pelo nome que termina em -ivo não funciona, mas o resto sim.
Eis o código HMTL:
<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>
e o 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 });
});