入力値のみを含むすべてのセクションとセクション間を切り替える必要がある

Question

私は顧客がログインすると、注文したアイテムがデータベースから取得されるページに移動するオンライン注文システムを実行していますそれはダイナミックであり、すべての顧客にとって異なっています。 一部の顧客は50以上のアイテムを持っています。したがって、入力フィールドに数量を入力すると、これまでに注文した内容を見たいことがあります。 私は完全な注文リストの間を切り換えて、数量を配置したものを見るためにjavascriptを試しています。 PHPを使って項目を取得する際には、各項目をSECTIONに入れ、次にDIV CLASS = "w3-third .."とします。

以下は、PHPのプルの底部です。最後のLIST要素は数量フィールドです。カウントのためにそれを取得するために、SPANをその周りに配置します。

そして、それは私が（私はここで質問をしてコーディングし、最初の時間に新たなんだ）しようとしてるのjavascriptです以下：

$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 
} ?> 

とJavaScript、何も次のようになります。

<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 

私は以下のjavascriptを使用してボタンをクリックすると正しいカウントを取得しますSPANを読んでいると、私は明らかにforループで何か間違っています。

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

私は2番目に数量を入れた場合、その後、私はまた、以下、これを試してみたが、それは最初にすべての33のセクションを切り替え、そして私は、セクションの入力欄に数量を入れた場合、それはトグルしません節、それは私が2か完全に別の何かの組み合わせを必要とするかどうかわからないんだけど

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

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

などを切り替えます。私は何日もオンラインで探していましたが、私が見つけることができるのは、1要素または1タイプの要素をトグルするトピックです。 助けてください。 ありがとうございます。

Answer 1

@mfinkは、[OK]を、私は私が私の問題を解決する助けに何かを見つけた...これを見て誰にも..and。私はライブ検索オプションも必要としていて、スクリプト（http://www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/）が見つかりました。セレクタを私のものに合わせて変更し、SECTIONに 'allitems'クラスを追加するだけでした。以下はライブ検索スクリプトです。

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

以下は、投稿された質問を解決するための方法です。それは、すべての入力タイプ「テキスト」をループので、私はそれを変更し、それが空白だ場合、それを切り替えます：

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

私もDBにそれを提出し、それを数回テストしてみた、それが働いています。誰かが欠陥/脆弱性を見た場合、私はそれについて知りたいと思います。 @mfink、私にそれを調べてくれてありがとう！