$ (...). data (...). split не является функцией - JQuery

Question

var $filterCheckboxes = $('input[type="checkbox"]');

        $filterCheckboxes.on('change', function() {
        
        
          var selectedFilters = {};
        
          $filterCheckboxes.filter(':checked').each(function() {
        
            if (!selectedFilters.hasOwnProperty(this.name)) {
              selectedFilters[this.name] = [];
            }
        
            selectedFilters[this.name].push(this.value);
        
          });
        
          // create a collection containing all of the filterable elements
          var $filteredResults = $('.speaker');
        
          // loop over the selected filter name -> (array) values pairs
          $.each(selectedFilters, function(name, filterValues) {
        
            // filter each .flower element
            $filteredResults = $filteredResults.filter(function() {
        
              var matched = false,
                currentFilterValues = $(this).data('category').split(' ');
                
                console.log( $(this).data('category'));
              // loop over each category value in the current .flower's data-category
              $.each(currentFilterValues, function(_, currentFilterValue) {
        
                // if the current category exists in the selected filters array
                // set matched to true, and stop looping. as we're ORing in each
                // set of filters, we only need to match once
        
                if ($.inArray(currentFilterValue, filterValues) != -1) {
                  matched = true;
                  return false;
                }
              });
        
              // if matched is true the current .flower element is returned
              return matched;
        
            });
          });
        
          $('.speaker').hide().filter($filteredResults).show();
        
        });

<input type="checkbox" class="filters" name="fl-name" id="1" value="1">1

<input type="checkbox" class="filters" name="fl-name" id="2" value="2">2

<input type="checkbox" class="filters" name="fl-name" id="3" value="3">3




<div class="speaker" data-id="speaker1" data-category="1 2 3 4 5 6 8">Sample1</div>
 
 <div class="speaker" data-id="speaker2" data-category="2" style="">Sample2</div>
                          
                          
<div class="speaker" data-id="speaker3" data-category="2 5" style="">Sample 3</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Когда я пытался отфильтровать данные с помощью флажка, который он показывает, пожалуйста, помогите ...

.......... .................................................. .................................................. .................................................. .................................................. .................................................. .............................

Спасибо.

Answer 1

Используйте как $(this).data('category').toString().split(' '). Причина, по которой вы получали ошибку, заключалась в том, что второй div возвращал только 2, а код преобразовывал значение в number 2. Таким образом, это вызывало ошибку.

PS вы всегда можете поставить debugger и проверить значения во время выполнения, что поможет вам найти ошибку.

Вы можете проверить ниже.

var $filterCheckboxes = $('input[type="checkbox"]');

$filterCheckboxes.on('change', function() {
  var selectedFilters = {};

  $filterCheckboxes.filter(':checked').each(function() {
    if (!selectedFilters.hasOwnProperty(this.name)) {
      selectedFilters[this.name] = [];
    }
    selectedFilters[this.name].push(this.value);
  });

  // create a collection containing all of the filterable elements
  var $filteredResults = $('.speaker');

  // loop over the selected filter name -> (array) values pairs
  $.each(selectedFilters, function(name, filterValues) {

    // filter each .flower element
    $filteredResults = $filteredResults.filter(function() {
    
      var matched = false,
        currentFilterValues = $(this).data('category').toString().split(' ');


      // loop over each category value in the current .flower's data-category
      $.each(currentFilterValues, function(_, currentFilterValue) {

        // if the current category exists in the selected filters array
        // set matched to true, and stop looping. as we're ORing in each
        // set of filters, we only need to match once

        if ($.inArray(currentFilterValue, filterValues) != -1) {
          matched = true;
          return false;
        }
      });

      // if matched is true the current .flower element is returned
      return matched;

    });
  });

  $('.speaker').hide().filter($filteredResults).show();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="checkbox" class="filters" name="fl-name" id="1" value="1">1
<input type="checkbox" class="filters" name="fl-name" id="2" value="2">2
<input type="checkbox" class="filters" name="fl-name" id="3" value="3">3
<div class="speaker" data-id="speaker1" data-category="1 2 3 4 5 6 8">Sample1</div>
<div class="speaker" data-id="speaker2" data-category="2" style="">Sample2</div>
<div class="speaker" data-id="speaker3" data-category="2 5" style="">Sample 3</div>