变化jQuery代码是一个函数

Question

我jQuery中有这样的代码，搜索HTML表格：

$('#contact_search').keyup(function() { 
      var $rows = $('#contact_table tbody tr'); 
      var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

      $rows.show().filter(function() { 
       var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
       return !~text.indexOf(val); 
      }).hide(); 
     }); 

，但我想将它做成一个函数，所以我可以在其他地方使用过，我有尝试：

function ContactSearch() { 
      var $rows = $('#contact_table tbody tr'); 
      var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

      $rows.show().filter(function() { 
       var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
       return !~text.indexOf(val); 
      }).hide(); 
     } 

这样的话我就可以改为调用它像这样：

if($("#contact_search").val()) { 
    ContactSearch(); 
} 
$('#contact_search').keyup(function() { 
    ContactSearch(); 
}); 

其调用函数好（我加alert("");位于显示的函数的顶部），但不搜索HTML表格。

Answer 1

您需要的值传递给函数如下图所示

function ContactSearch(value) { 
      var $rows = $('#contact_table tbody tr'); 
      var val = $.trim(value).replace(/ +/g, ' ').toLowerCase(); 

      $rows.show().filter(function() { 
       var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
       return !~text.indexOf(val); 
      }).hide(); 
     } 

，并调用函数如下图所示

if($("#contact_search").val()) { 
    ContactSearch($("#contact_search").val());// pass required value 
} 
$('#contact_search').keyup(function() { 
    ContactSearch($(this).val()); 
}); 

Answer 2

试试这个：

function ContactSearch() { 
     var $rows = $(document).find('#contact_table tbody tr'); 
     var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

     $rows.show().filter(function() { 
      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
      return !~text.indexOf(val); 
     }).hide(); 
    } 

Answer 3

试试这个

function ContactSearch() { 
var th = $("#contact_search"); 
      var $rows = $('#contact_table tbody tr'); 
      var val = $.trim($(th).val()).replace(/ +/g, ' ').toLowerCase(); 

      $rows.show().filter(function() { 
       var text = $(th).text().replace(/\s+/g, ' ').toLowerCase(); 
       return !~text.indexOf(val); 
      }).hide(); 
     } 

Answer 4

您没有传递任何元素所以目前this不正确，尝试将元素传递给函数：

function ContactSearch(el) { 
      var $rows = $('#contact_table tbody tr'); 
      var val = $.trim($(el).val()).replace(/ +/g, ' ').toLowerCase(); 

      $rows.show().filter(function() { 
       var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
       return !~text.indexOf(val); 
      }).hide(); 
     } 

Answer 5

你不能在函数内部使用$（本），

指任何VAR到#content_search

function ContactSearch() { 
    var $x = $("#contact_search"); 
    var $rows = $('#contact_table tbody tr'); 
    var val = $.trim($x.val()).replace(/ +/g, ' ').toLowerCase(); 
    $rows.show().filter(function() { 
     var text = $x.text().replace(/\s+/g, ' ').toLowerCase(); 
     return !~text.indexOf(val); 
    }).hide(); 
} 

Answer 6

this是你的函数中的上下文。您需要将其作为参数传递或用$('#contact_search')替换$(this)选择器。

Answer 7

让它为：

function ContactSearch($this) { 
     var $rows = $('#contact_table tbody tr'); 
     var val = $.trim($this).replace(/ +/g, ' ').toLowerCase(); 

     $rows.show().filter(function() { 
      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
      return !~text.indexOf(val); 
     }).hide(); 
    } 

称其为：

$('#contact_search').keyup(function() { 
    ContactSearch($(this).val()); 
    });