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