9阅网

请输入关键字词

热门标签排行

网友热搜词排行

您现在的位置是：首页 > 知识 > 正文

知识

javascript - 如何使用jquery让两个过滤器都处于活动状态？

admin2022-11-07知识16

我正在尝试对一个表的部门和位置列进行过滤。这两个过滤器是同时工作的。

我不知道如何使两个过滤器同时工作。

例如，如果我需要过滤所有带有 "纽约 "位置的 "工程 "部门。我怎样才能使代码记住并同时应用两个过滤器？谢谢你的帮助。

//function to filter the departments based on selection
function filterTextDept() {
  var rexD = new RegExp($('#filterTextDept').val());
  if (rexD == "/all/") {
    clearFilter()
  } else {
    $('.content').hide();
    $('.content').filter(function() {
      return rexD.test($(this).text());
    }).show();
  }
}

function clearFilter() {
  $('#filterTextDept').val('');
  $('.content').show();
}

//function to filter the locations based on selection
function filterTextLoc() {
  var rexL = new RegExp($('#filterTextLoc').val());
  if (rexL == "/all/") {
    clearFilter()
  } else {
    $('.content').hide();
    $('.content').filter(function() {
      return rexL.test($(this).text());
    }).show();
  }
}

function clearFilter() {
  $('#filterTextLoc').val('');
  $('.content').show();
} 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <title></title>
  </head>
  <body>
  <select id="filterTextDept" onchange="filterTextDept()">
    <option disabled="disabled" selected="selected">Filter by Department</option>
    <option value="Compliance">Compliance</option>
    <option value="Data Science">Data Science</option>
    <option value="Engineering">Engineering</option>
    <option value="Growth">Growth</option>
    <option value="Product Management">Product Management</option>
    <option value="Sales">Sales</option>
    <option value="all">All</option>
  </select> 
  <select id="filterTextLoc" onchange="filterTextLoc()">
    <option disabled="disabled" selected="selected">Filter by Location</option>
    <option value="New York">New York</option>
    <option value="Chennai">Chennai</option>
    <option value="San Francisco">San Francisco</option>
    <option value="San Diego">San Diego</option>
    <option value="Remote">Remote</option>
    <option value="all">All</option>
  </select>
  <table id="jobTable">
    <tbody>
      <tr>
        <th>Job Title</th>
        <th>Department</th>
        <th>Location</th>
        <th></th>
      </tr>
      <tr>
        <td>Account Manager</td>
        <td>Growth</td>
        <td>New York</td>
        <td>
          <a href="Account%20Manager">Link</a>
        </td>
      </tr>
      <tr>
        <td>Associate Account Manager</td>
        <td>Growth</td>
        <td>New York</td>
        <td>
          <a href="Associate%20Account%20Manager">Link</a>
        </td>
      </tr>
      <tr>
        <td>Director, Account Executive</td>
        <td>Sales</td>
        <td>New York</td>
        <td>
          <a href="Director,%20Account%20Executive">Link</a>
        </td>
      </tr>
      <tr>
        <td>Director, Account Executive</td>
        <td>Sales</td>
        <td>San Diego</td>
        <td>
          <a href="Director,%20Account%20Executive">Link</a>
        </td>
      </tr>
      <tr>
        <td>Director, Account Executive</td>
        <td>Sales</td>
        <td>San Francisco or Remote</td>
        <td>
          <a href="Director,%20Account%20Executive">Link</a>
        </td>
      </tr>
      <tr>
        <td>Director of Engineering</td>
        <td>Engineering</td>
        <td>New York</td>
        <td>
          <a href="Director%20of%20Engineering">Link</a>
        </td>
      </tr>
      <tr>
        <td>Director of Product Management, Fraud Risk</td>
        <td>Product Management</td>
        <td>New York</td>
        <td>
          <a href="Director%20of%20Product%20Management,%20Fraud%20Risk">Link</a>
        </td>
      </tr>
      <tr>
        <td>Director of Strategic Alliances</td>
        <td>Sales</td>
        <td>San Diego</td>
        <td>
          <a href="Director%20of%20Strategic%20Alliances">Link</a>
        </td>
      </tr>
      <tr>
        <td>Head of Solution Consulting</td>
        <td>Growth</td>
        <td>San Diego, New York or Remote</td>
        <td>
          <a href="Head%20of%20Solution%20Consulting">Link</a>
        </td>
      </tr>
      <tr>
        <td>IT Risk and Compliance Officer</td>
        <td>Compliance</td>
        <td>New York</td>
        <td>
          <a href="IT%20Risk%20and%20Compliance%20Officer">Link</a>
        </td>
      </tr>
      <tr>
        <td>Lead Data Scientist</td>
        <td>Data Science</td>
        <td>New York or Remote</td>
        <td>
          <a href="Lead%20Data%20Scientist">Link</a>
        </td>
      </tr>
      <tr>
        <td>Senior Data Engineer</td>
        <td>Data Science</td>
        <td>New York or Remote</td>
        <td>
          <a href="Senior%20Data%20Engineer">Link</a>
        </td>
      </tr>
      <tr>
        <td>Senior Data Scientist</td>
        <td>Data Science</td>
        <td>New York or Remote</td>
        <td>
          <a href="Senior%20Data%20Scientist">Link</a>
        </td>
      </tr>
      <tr>
        <td>Senior Product Manager, Document Verification</td>
        <td>Product Management</td>
        <td>New York</td>
        <td>
          <a href="Senior%20Product%20Manager,%20Document%20Verification">Link</a>
        </td>
      </tr>
      <tr>
        <td>Senior Software Engineer</td>
        <td>Engineering</td>
        <td>Chennai</td>
        <td>
          <a href="Senior%20Software%20Engineer">Link</a>
        </td>
      </tr>
      <tr>
        <td>Software Engineer (All Levels)</td>
        <td>Engineering</td>
        <td>New York or Remote (East Coast)</td>
        <td>
          <a href="Software%20Engineer%20(All%20Levels)">Link</a>
        </td>
      </tr>
      <tr>
        <td>Solution Consultant</td>
        <td>Growth</td>
        <td>San Francisco or New York</td>
        <td>
          <a href="Solution%20Consultant">Link</a>
        </td>
      </tr>
      <tr>
        <td>Staff Software Engineer - Chennai</td>
        <td>Engineering</td>
        <td>Chennai</td>
        <td>
          <a href="Staff%20Software%20Engineer%20-%20Chennai">Link</a>
        </td>
      </tr>
      <tr>
        <td>Staff Software Engineer - Core Platform</td>
        <td>Engineering</td>
        <td>New York or Remote (East Coast)</td>
        <td>
          <a href="Staff%20Software%20Engineer%20-%20Core%20Platform">Link</a>
        </td>
      </tr>
    </tbody>
  </table></body>
</html>


【回答】：

我试图尽可能少地修改你的代码。你非常接近解决方案我的方法是每次都运行所有的过滤器。

编辑

您可以用 $('.content:visible').length

function updateFilters () {
clearFilter()
filterTextDept()
filterTextLoc()
postFilter()
}
function postFilter() {
  $visibleLinesCount = $('.content:visible').length
  if ($visibleLinesCount === 0) {
    // here your logic when no result 
    console.log('no result')
  } else if ($visibleLinesCount === 1) {
    console.log('only one result')
  } else {
    console.log($visibleLinesCount + ' results')
  }
}
//function to filter the departments based on selection
function filterTextDept() {
  var rexD = new RegExp($('#filterTextDept').val());
  if (!$('#filterTextDept').val()) {
    // nothing selected
    return;
  } else if (rexD == "/all/") {
    return;
  } else {
    //$('.content').hide();
    $('.content').filter(function() {
      return !rexD.test($(this).text());
    }).hide();
  }
}

//function to filter the locations based on selection
function filterTextLoc() {
  var rexL = new RegExp($('#filterTextLoc').val());
  if (!$('#filterTextLoc').val()) {
    // nothing selected
    return;
  } else if (rexL == "/all/") {
    return;
  } else {
    //$('.content').hide();
    $('.content').filter(function() {
      return !rexL.test($(this).text());
    }).hide();
  }
}

function clearFilter() {
  $('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <title></title>
  </head>
  <body>
  <select id="filterTextDept" onchange="updateFilters()">
    <option disabled="disabled" selected="selected">Filter by Department</option>
    <option value="Compliance">Compliance</option>
    <option value="Data Science">Data Science</option>
    <option value="Engineering">Engineering</option>
    <option value="Growth">Growth</option>
    <option value="Product Management">Product Management</option>
    <option value="Sales">Sales</option>
    <option value="all">All</option>
  </select> 
  <select id="filterTextLoc" onchange="updateFilters()">
    <option disabled="disabled" selected="selected">Filter by Location</option>
    <option value="New York">New York</option>
    <option value="Chennai">Chennai</option>
    <option value="San Francisco">San Francisco</option>
    <option value="San Diego">San Diego</option>
    <option value="Remote">Remote</option>
    <option value="all">All</option>
  </select>
  <table id="jobTable" class="table table-bordered table-striped table-hover table-list-search">
    <tbody>
      <tr>
        <th>Job Title</th>
        <th>Department</th>
        <th>Location</th>
        <th></th>
      </tr>
      <tr class="content">
        <td>Account Manager</td>
        <td>Growth</td>
        <td>New York</td>
        <td>
          <a href="Account%20Manager">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Associate Account Manager</td>
        <td>Growth</td>
        <td>New York</td>
        <td>
          <a href="Associate%20Account%20Manager">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Director, Account Executive</td>
        <td>Sales</td>
        <td>New York</td>
        <td>
          <a href="Director,%20Account%20Executive">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Director, Account Executive</td>
        <td>Sales</td>
        <td>San Diego</td>
        <td>
          <a href="Director,%20Account%20Executive">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Director, Account Executive</td>
        <td>Sales</td>
        <td>San Francisco or Remote</td>
        <td>
          <a href="Director,%20Account%20Executive">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Director of Engineering</td>
        <td>Engineering</td>
        <td>New York</td>
        <td>
          <a href="Director%20of%20Engineering">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Director of Product Management, Fraud Risk</td>
        <td>Product Management</td>
        <td>New York</td>
        <td>
          <a href="Director%20of%20Product%20Management,%20Fraud%20Risk">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Director of Strategic Alliances</td>
        <td>Sales</td>
        <td>San Diego</td>
        <td>
          <a href="Director%20of%20Strategic%20Alliances">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Head of Solution Consulting</td>
        <td>Growth</td>
        <td>San Diego, New York or Remote</td>
        <td>
          <a href="Head%20of%20Solution%20Consulting">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>IT Risk and Compliance Officer</td>
        <td>Compliance</td>
        <td>New York</td>
        <td>
          <a href="IT%20Risk%20and%20Compliance%20Officer">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Lead Data Scientist</td>
        <td>Data Science</td>
        <td>New York or Remote</td>
        <td>
          <a href="Lead%20Data%20Scientist">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Senior Data Engineer</td>
        <td>Data Science</td>
        <td>New York or Remote</td>
        <td>
          <a href="Senior%20Data%20Engineer">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Senior Data Scientist</td>
        <td>Data Science</td>
        <td>New York or Remote</td>
        <td>
          <a href="Senior%20Data%20Scientist">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Senior Product Manager, Document Verification</td>
        <td>Product Management</td>
        <td>New York</td>
        <td>
          <a href="Senior%20Product%20Manager,%20Document%20Verification">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Senior Software Engineer</td>
        <td>Engineering</td>
        <td>Chennai</td>
        <td>
          <a href="Senior%20Software%20Engineer">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Software Engineer (All Levels)</td>
        <td>Engineering</td>
        <td>New York or Remote (East Coast)</td>
        <td>
          <a href="Software%20Engineer%20(All%20Levels)">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Solution Consultant</td>
        <td>Growth</td>
        <td>San Francisco or New York</td>
        <td>
          <a href="Solution%20Consultant">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Staff Software Engineer - Chennai</td>
        <td>Engineering</td>
        <td>Chennai</td>
        <td>
          <a href="Staff%20Software%20Engineer%20-%20Chennai">Link</a>
        </td>
      </tr>
      <tr class="content">
        <td>Staff Software Engineer - Core Platform</td>
        <td>Engineering</td>
        <td>New York or Remote (East Coast)</td>
        <td>
          <a href="Staff%20Software%20Engineer%20-%20Core%20Platform">Link</a>
        </td>
      </tr>
    </tbody>
  </table></body>
</html>
【回答】：

这个片段通过一个逻辑的 或:

const filters = {
  dept: '',
  loc: ''
}

const deptFilter = document.getElementById('filterTextDept')
const locFilter = document.getElementById('filterTextLoc')

deptFilter.addEventListener('change', function(e) {
  setFilters('dept', e.target.value)
})

locFilter.addEventListener('change', function(e) {
  setFilters('loc', e.target.value)
})

const setFilters = (type, val) => {
  filters[type] = val === 'all' ? '' : val
  const r = Object.values(filters).filter(e => e).join('|')
  const regex = new RegExp(`(${r})`)
  $('.content').hide();
  $('.content').filter(function() {
    return regex.test($(this).text());
  }).show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="filterTextDept">
  <option disabled="disabled" selected="selected">Filter by Department</option>
  <option value="Compliance">Compliance</option>
  <option value="Data Science">Data Science</option>
  <option value="Engineering">Engineering</option>
  <option value="Growth">Growth</option>
  <option value="Product Management">Product Management</option>
  <option value="Sales">Sales</option>
  <option value="all">All</option>
</select>
<select id="filterTextLoc">
  <option disabled="disabled" selected="selected">Filter by Location</option>
  <option value="New York">New York</option>
  <option value="Chennai">Chennai</option>
  <option value="San Francisco">San Francisco</option>
  <option value="San Diego">San Diego</option>
  <option value="Remote">Remote</option>
  <option value="all">All</option>
</select>
<table id="jobTable" class="table table-bordered table-striped table-hover table-list-search">
  <tbody>
    <tr>
      <th>Job Title</th>
      <th>Department</th>
      <th>Location</th>
      <th></th>
    </tr>
    <tr class="content">
      <td>Account Manager</td>
      <td>Growth</td>
      <td>New York</td>
      <td>
        <a href="Account%20Manager">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Associate Account Manager</td>
      <td>Growth</td>
      <td>New York</td>
      <td>
        <a href="Associate%20Account%20Manager">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Director, Account Executive</td>
      <td>Sales</td>
      <td>New York</td>
      <td>
        <a href="Director,%20Account%20Executive">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Director, Account Executive</td>
      <td>Sales</td>
      <td>San Diego</td>
      <td>
        <a href="Director,%20Account%20Executive">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Director, Account Executive</td>
      <td>Sales</td>
      <td>San Francisco or Remote</td>
      <td>
        <a href="Director,%20Account%20Executive">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Director of Engineering</td>
      <td>Engineering</td>
      <td>New York</td>
      <td>
        <a href="Director%20of%20Engineering">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Director of Product Management, Fraud Risk</td>
      <td>Product Management</td>
      <td>New York</td>
      <td>
        <a href="Director%20of%20Product%20Management,%20Fraud%20Risk">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Director of Strategic Alliances</td>
      <td>Sales</td>
      <td>San Diego</td>
      <td>
        <a href="Director%20of%20Strategic%20Alliances">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Head of Solution Consulting</td>
      <td>Growth</td>
      <td>San Diego, New York or Remote</td>
      <td>
        <a href="Head%20of%20Solution%20Consulting">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>IT Risk and Compliance Officer</td>
      <td>Compliance</td>
      <td>New York</td>
      <td>
        <a href="IT%20Risk%20and%20Compliance%20Officer">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Lead Data Scientist</td>
      <td>Data Science</td>
      <td>New York or Remote</td>
      <td>
        <a href="Lead%20Data%20Scientist">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Senior Data Engineer</td>
      <td>Data Science</td>
      <td>New York or Remote</td>
      <td>
        <a href="Senior%20Data%20Engineer">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Senior Data Scientist</td>
      <td>Data Science</td>
      <td>New York or Remote</td>
      <td>
        <a href="Senior%20Data%20Scientist">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Senior Product Manager, Document Verification</td>
      <td>Product Management</td>
      <td>New York</td>
      <td>
        <a href="Senior%20Product%20Manager,%20Document%20Verification">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Senior Software Engineer</td>
      <td>Engineering</td>
      <td>Chennai</td>
      <td>
        <a href="Senior%20Software%20Engineer">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Software Engineer (All Levels)</td>
      <td>Engineering</td>
      <td>New York or Remote (East Coast)</td>
      <td>
        <a href="Software%20Engineer%20(All%20Levels)">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Solution Consultant</td>
      <td>Growth</td>
      <td>San Francisco or New York</td>
      <td>
        <a href="Solution%20Consultant">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Staff Software Engineer - Chennai</td>
      <td>Engineering</td>
      <td>Chennai</td>
      <td>
        <a href="Staff%20Software%20Engineer%20-%20Chennai">Link</a>
      </td>
    </tr>
    <tr class="content">
      <td>Staff Software Engineer - Core Platform</td>
      <td>Engineering</td>
      <td>New York or Remote (East Coast)</td>
      <td>
        <a href="Staff%20Software%20Engineer%20-%20Core%20Platform">Link</a>
      </td>
    </tr>
  </tbody>
</table>

相关文章