JavaScript 下拉菜单过滤器：我可以在 "data-" 属性中添加多个值吗？

Question

我正在尝试使用 JavaScript 创建下拉过滤器。我想使用逗号向“数据主题”添加更多值。你能解释一下如何在下面的 JavaScript 中给多个值赋予属性吗？谢谢！

<div class="col-md-3 col-6 property-item" data-grade="prek" data-type="lesson" **data-subject="eng,sci"** >

< script >

  $("select.grade, select.type, select.subject").change(update);

function update() {

var resourceGrade = $('select.grade').val();
var resourceType = $('select.type').val();
var resourceSubject = $('select.subject').val();

    $('.property-load-section')

    .find('.property-item')
    .hide()
    .filter(function() {

      var okResourceGrade = true;
      if (resourceGrade !== "all") {
        okResourceGrade = $(this).attr('data-grade') === resourceGrade;
      }
      
      var okResourceType = true;
      if (resourceType !== "all") {
        okResourceType = $(this).attr('data-type') === resourceType;
      }
      
      var okResourceSubject = true;
      if (resourceSubject !== "all") {
        okResourceSubject = $(this).attr('data-subject') === resourceSubject;
      }
      
      console.log(okResourceSubject);
      
      return okResourceGrade && okResourceType && okResourceSubject;
      
    })
    
    .fadeIn('fast');

}
< /script>

Answer 1

试试这个

okResourceSubject = $(this).attr('data-subject').split(',').includes(resourceSubject);

split(',') 会创建一个数组，所有值用逗号分隔

JavaScript 下拉菜单过滤器：我可以在 "data-" 属性中添加多个值吗？

JavaScript dropdown menu filter: Can I add multiple values in the "data-" attribute?

javascript

filter