Использование jQuery для управления именем фильтра, заполненного базой данных, для отображения нескольких элементов портфолио.

Question

У меня есть страница продукта, где я создал фильтр для сортировки списка продуктов по категориям.

$(document).ready(function() {
  $(".tab").click(function() {
    var value = $(this).attr('data-filter');
    if (value == "all") {
      //$('.filter').removeClass('hidden');
      $('.filter').show('1000');
    } else {
      $(".filter").not('.' + value).hide('3000');
      $('.filter').filter('.' + value).show('3000');
    }
  });

  if ($(".tab").removeClass("active")) {
    $(this).removeClass("active");
  }

  $(this).addClass("active");

Все отлично работает, но у меня есть одна категория с именем «Электроинструмент», и только этот фильтр у меня не работает. Я подозреваю, что проблема заключается в пробеле между «power» и «tools».

Этот код работает здесь: http://www.buildersmart.net/products.php

Answer 1

Это сделает волхвов c для вашего случая.

$(document).ready(function() {
      $(".tab").click(function() {
        var value = $(this).attr('data-filter');
            value = value.split(' ').join('.');
        if (value == "all") {
          //$('.filter').removeClass('hidden');
          $('.filter').show('1000');
        } else {
          $(".filter").not('.' + value).hide('3000');
          $('.filter').filter('.' + value).show('3000');
        }
      });

      if ($(".tab").removeClass("active")) {
        $(this).removeClass("active");
      }

      $(this).addClass("active");

Примечание: value = value.split ('') .join ('.');

Этот фрагмент кода удалит пробелы с точками. Так что «Электроинструменты» станут «Power.Tools». Тогда селектор jQuery может поднять его как

$('.Power.Tools').show('3000');