javascript - Jquery函数相互覆盖

Question

问题:

我有 2 个 jQuery 函数，一个是搜索函数，另一个是只显示特定类型的列值的函数。问题是，如果我使用第二个函数选择一个列值并隐藏其他行，然后尝试搜索那些行，它会重置并搜索所有行。

Fiddle

代码:

这是两个函数:

搜索:

$(document).ready(function(){
  $("#mySearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr td:nth-child(1)").filter(function() {
      $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

专栏:

$(function() {
   $('select[name="CPUmenu"]').change(function(e) {
      let socket = $(this).val();
      $('tbody tr[data-socket]').show();
      if (socket.length) {
        $('tbody tr[data-socket!="' + socket + '"]').hide();
      }
   });
   $('select[name="CPUmenu"]').trigger('change');
});

预期结果:

我在想该函数只能应用于未隐藏的行，但我不确定它的代码是什么。

更新:

我看到了 :hidden选择器并认为我可以使用 .not(:hidden)

我还计划在未来添加更多功能，因此需要它能够扩展。

如果您需要更多信息，请告诉我。

谢谢

Answer 1

我真的不知道这会做什么，但我认为您的搜索功能应该是这样的:

$(document).ready(function(){
  $("#mySearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr td:nth-child(1)").filter(function() {
      if ($(this).parent.css("display") == "block") {
        $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)        
      }
    });
  });
});