jQuery在keyup後迭代時凍結（）

-1

我有一個問題，jQuery在輸入框的鍵控上凍結多秒。我試圖根據用戶輸入的值顯示/隱藏表格的行，並且同時用jQuery處理一些邊界。jQuery在keyup後迭代時凍結（）

例如，用戶鍵入'3'。在keyup中，所有具有'3'的行應保持可見，而沒有它的行將隱藏。我已將問題隔離到javascript的註釋行。活躍時，它們是導致問題的原因。評論他們正在糾正我的凍結問題，但我試圖實現的邊框樣式是不正確的。爲什麼會這樣呢？

JS：

$('#narrow').keyup(function() { 
    var text = $(this).val().toLowerCase(); 
    $('.multiples-table tbody tr').each(function() { 
     if ($(this).text().toLowerCase().indexOf(text) == -1) { 
      $(this).hide(); 

      $('.table-wrapper').css('border', 0); 
      $('.multiples-table').css('border-left', '2px solid #ccc'); 
      $('.multiples-table').css('border-top', '2px solid #ccc'); 
     } 
     else { 
      $(this).show(); 

      //$('.table-wrapper').css('border', '2px solid #ccc'); 
      //$('.multiples-table').css('border-left', 0); 
      //$('.multiples-table').css('border-top', 0); 
     } 
    }); 
});

HTML：

<input type="text" id="narrow" class="search" placeholder="Filter" value=""> 
    <div class="table-wrapper"> 
     <table class="multiples-table"> 
      <tbody> 
       <tr> 
        <td>$10,000</td> 
        <td>$3.40</td> 
        <td> 
         <asp:Button ID="btn1" Text="Select" runat="server" /> 
        </td> 
       </tr> 
       <tr> 
        <td>$20,000</td> 
        <td>$5.10</td> 
        <td> 
         <asp:Button ID="Button1" Text="Select" runat="server" /> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div>

來源

2017-01-31 noclist

你改變CS你的'每個'裏面的表格的s，一遍又一遍地改變它。你不能在循環中設置一個標誌，然後在循環之外改變一次css嗎？ –

一個建議，儘量緩存查詢元素。例如，存儲'$（'。multiples-table'）'並將CSS應用於該變量，而不是再次爲類'multiple-table''查詢DOM。對於大量元素來說，這可以產生顯着的差異。此外，CSS屬性'border-left' /'border-right'不具有'0'作爲可接受的值。 'none'是設置'border-left'或'border-top'來表示無邊框的有效選項。另一方面，'border-width'將具有'0'作爲可接受的值。 –

提示：'.toLowerCase（）'與數字無關。 – melancia

儘量推遲的CSS直到循環結束：

$(function() { 
 

 

 

 
    $('#narrow').keyup(function() { 
 
    var shouldSetBorder = false; 
 

 
    var text = $(this).val().toLowerCase(); 
 
    $('.multiples-table tbody tr').each(function() { 
 
     if ($(this).text().toLowerCase().indexOf(text) == -1) { 
 
     $(this).hide(); 
 
     shouldSetBorder = false; 
 
     } else { 
 
     $(this).show(); 
 
     shouldSetBorder = true; 
 
     } 
 
    }); 
 

 
    if (shouldSetBorder) { 
 
     $('.table-wrapper').css('border', '2px solid #ccc'); 
 
     $('.multiples-table').css('border-left', 0); 
 
     $('.multiples-table').css('border-top', 0); 
 
    } else { 
 
     $('.table-wrapper').css('border', 0); 
 
     $('.multiples-table').css('border-left', '2px solid #ccc'); 
 
     $('.multiples-table').css('border-top', '2px solid #ccc'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="narrow" class="search" placeholder="Filter" value=""> 
 
<div class="table-wrapper"> 
 
    <table class="multiples-table"> 
 
    <tbody> 
 
     <tr> 
 
     <td>$10,000</td> 
 
     <td>$3.40</td> 
 
     <td> 
 
      <asp:Button ID="btn1" Text="Select" runat="server" /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>$20,000</td> 
 
     <td>$5.10</td> 
 
     <td> 
 
      <asp:Button ID="Button1" Text="Select" runat="server" /> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

來源

2017-01-31 21:33:18 Yaser

jQuery在keyup後迭代時凍結（）

回答

相關問題