입력 값만있는 모든 섹션과 섹션 사이를 전환해야 함

Question

나는 고객이 로그인 할 때 주문하는 항목이 db에서 검색되는 페이지로 이동하는 온라인 주문 시스템을 수행하고 있습니다. 따라서 모든 고객에게 역동적이며 차별화됩니다. 일부 고객은 50 개가 넘는 품목을 보유하고 있으므로 입력 필드에 수량을 입력 할 때마다 지금까지 주문한 품목을보고 싶어합니다. 전체 주문 목록간에 전환하고 얼마만큼 수량을 배치했는지 보려면 javascript를 사용하고 있습니다. PHP를 통해 항목을 가져 오는 동안 각 항목을 SECTION에 넣고 DIV CLASS = "w3-third .."를 입력합니다.

아래는 PHP 풀의 하단 부분입니다. 마지막 LIST 요소는 수량 필드이며, 카운트를 얻기 위해 SPAN을 둘 수 있습니다.

$i=1; //counter variable 
    while($rowtbl = mysqli_fetch_array($resulttbl)) { 

    ?> 

    <section> 
     <div class="w3-third w3-margin-bottom" id="itemsToFilter" data-type="<?php echo $rowtbl['category']?>"> 
      <ul class="w3-ul w3-border w3-center w3-hover-shadow" > 
       <li class="w3-padding-16"><?php echo htmlspecialchars($rowtbl['CustNo']) ?></li> 
       <li class="w3-green"><?php echo htmlspecialchars($rowtbl['description']) ?></li> 
       <li class="w3-padding-16"><?php echo htmlspecialchars($rowtbl['brand']) ?></li> 
       <li class="w3-padding-16"><?php echo htmlspecialchars($rowtbl['category']) ?></li> 
       <li class="w3-padding-16"><?php echo htmlspecialchars($rowtbl['itemNu']) ?> 
       <input type="hidden" name="prodid<?php echo $i; ?>" value="<?php echo $rowtbl['itemNu']; ?>" /></li> 
       <li class="w3-padding-16"><?php echo htmlspecialchars($rowtbl['pksz']) ?></li> 
       <li class="w3-padding-16"><?php echo htmlspecialchars($rowtbl['ea']) ?></li>       

       <?php if ($rowtbl['bc'] == "y" && $rowtbl['ea'] == 1) { ?> 
       <li class="w3-padding-16"><input type="checkbox" checked name="bc<?php echo $i; ?>" /></li> 
       <?php } elseif ($rowtbl['bc'] == "y" && $rowtbl['ea'] == 0) { ?> 
       <li class="w3-padding-16"><input type="checkbox" name="bc<?php echo $i; ?>" /></li> 
       <?php } 
       else { ?> 
       <li class="w3-padding-16"><input type="hidden" name="bc<?php echo $i; ?>" /></li> 

       <? 
        } 

       ?> 
       <input type="hidden" name="rows" id="rows" value="<?php echo $i; ?>" /> 
       <li class="w3-padding-16"><span><input type="text" name="qty<?php echo $i; ?>" id="inputq" /></span></li>      
      </ul> 
     <div> 
    </section>    
<?php $i++; //increment counter variable 
} ?> 

와 자바 스크립트, 아무것도 :

그리고 그 아래

(나는 코딩 처음 여기에 질문을 새로운 해요) 내가 시도하고있어 자바 스크립트입니다 발생합니다 :

<script> 
$(document).ready(function(){ 
    $("button").click(function() { 
    var x = document.getElementsByTagName("span"); 
    document.getElementById("demo").innerHTML = x.length; 
    var i; 
    for (var i = 0; i < x.length; i++) { 
     if(document.getElementById("inputq".[i]).value == ""){ 
     $("span").parentsUntil("section").toggle(); 
    } 
    } 
    }); 
}); 
</script 

아래의 자바 스크립트 만 사용하고 버튼을 클릭하면 정확한 카운트를 얻습니다. SPAN을 읽는 중, 나는 분명히 for 반복문으로 뭔가 잘못하고있다.

<script> 
$(document).ready(function(){ 
    $("button").click(function() { 
    var x = document.getElementsByTagName("span"); 
    document.getElementById("demo").innerHTML = x.length; 
    }); 
}); 
</script> 

은 또한 다음이 시도했지만, 그것은 처음에 모든 33 절을 전환하고, 나는 섹션 입력 필드에 양을 넣을 경우 내가 두 번째의 양을 넣을 경우, 그 다음, 전환하지 않습니다 섹션, 토글 등

$(document).ready(function(){ 
    $("button").click(function(){ 

    $('input[type=text]').each(function(){ 
     if (this.value == "") { 
      $("span").parentsUntil("section").toggle(); 
     }; 
    }); 
}); 
}); 

완전히 다른 두 가지 조합이 필요한지 확실하지 않습니다. 며칠 동안 온라인에서 찾고 있었지만 찾을 수있는 것은 1 요소 또는 1 유형의 요소를 토글하는 주제입니다. 도와주세요 .. 미리 감사드립니다.

Answer 1

@mfink .. 그리고 이걸 보는 다른 사람에게 ... 좋아, 내가 내 문제를 해결하는 데 도움이되는 것을 발견했다. 나는 또한 라이브 검색 옵션이 필요했고 스크립트 (http://www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/)를 찾았는데, 여기서는 선택기를 내 것과 매치시키고 'allitems'클래스를 내 SECTION에 추가해야했습니다. 다음은 실시간 검색 스크립트입니다.

$(document).ready(function(){ 
$("#filter").keyup(function(){ 

    // Retrieve the input field text and reset the count to zero 
    var filter = $(this).val(), count = 0; 

    // Loop through the Items list 
    $(".allitems div").each(function(){ 

     // If the list item does not contain the text phrase fade it out 
     if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
      $(this).fadeOut(); 

     // Show the list item if the phrase matches and increase the count by 1 
     } else { 
      $(this).show(); 
      count++; 
     } 
    }); 

    // Update the count 
    var numberItems = count; 
    $("#filter-count").text("Number of Matches = "+count); 
}); 
}); 

이하는 게시 된 질문을 해결하기 위해 어떻게 변경했는지입니다. 이 모든 입력 유형 '텍스트'를 통해 루프 그래서 나는 그것을 변경하고 비어 있다면, 그것을 전환 : 나는 심지어 DB에 제출, 그것을 몇 번 테스트 한

$(document).ready(function(){ 
$("#getIt").click(function(){ 

    // Retrieve the input field text and reset the count to zero 
    var filterI = $(this).val(), count = 0; 

    // Loop through the items list 
    $(":text").each(function(){ 

     // If the list item does not contain a quantity fade it out 
     if ($(this).val() == "") { 
      $(this).parentsUntil("section").toggle(); 

     // Show the list item if there is a quantity and increase the count by 1 
     } else { 
      $(this).show(); 
      count++; 
     } 
    }); 

    // Update the count 
    var numberItems = count; 
    $("#filterI-count").text("Items On Your Order = "+count); 
}); 
}); 

, 그리고 그것을 일하고있다 . 누군가가 결함/취약성을 발견하면 그 사실을 알고 싶을 것입니다. @mfink, 저를 찾아 주셔서 감사합니다!