时间戳

首页 > 解决方案 > jQuery函数相互覆盖

javascript - jQuery函数相互覆盖

问题描述

问题：

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

小提琴

代码：

这是2个功能：

搜索：

$(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)

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

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

谢谢

标签： javascriptjqueryhtml

解决方案

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

$(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)        
      }
    });
  });
});

推荐阅读