jQuery가 키 입력 후 반복 될 때 멈춤()

-1

입력 상자의 키 입력에서 jQuery가 여러 초 동안 멈추는 문제가 있습니다. 사용자 입력 값을 기반으로 테이블의 행을 표시/숨기고 동시에 jQuery와 함께 일부 테두리를 조작하려고 시도하고 있습니다.jQuery가 키 입력 후 반복 될 때 멈춤()

예를 들어, 사용자가 '3'을 입력합니다. 키 업에서 '3'이있는 모든 행은 보이지 않으면 숨겨집니다. 자바 스크립트의 주석 처리 된 줄에이 문제를 격리했습니다. 활성화되면 문제의 원인이됩니다. 그 (것)들을 주석으로 달기는 나의 어는 문제를 정정하고있다, 그러나 나가 얻는 것을 시도하고있는 국경 작풍은 틀리다. 왜 이것이 사실입니까?

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 : 루프가 완료 될 때까지 CSS를 연기

<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')'을 저장하고 DOM에''multiple-table ''클래스의 요소를 다시 쿼리하는 대신 CSS를 변수에 적용합니다. 요소 수가 많으면 눈에 띄는 차이가 발생할 수 있습니다. 또한 CSS 속성 인'border-left' /'border-right'는 수용 가능한 값으로'0'을 갖지 않습니다. 'none'은'border-left' 또는'border-top'을 설정하여 테두리 없음을 표시하는 유효한 옵션입니다. 반면에'border-width'는 수용 가능한 값으로'0'을 가질 것입니다. –

팁 :'.toLowerCase()'는 숫자와 관련이 없습니다. – melancia

시도 :

$(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가 키 입력 후 반복 될 때 멈춤()

답변

관련 문제