1

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 });
});

1 Resposta 1

1

Uma pequena mudança no seu código, e ele funcionará, perfeitamente, observe.

// 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$/ );
},

ivo: 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 });
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .