Muss zwischen allen Abschnitten und Abschnitten mit nur Eingabewert wechseln

Question

Ich mache ein Online-Bestellsystem für unsere Kunden, wo, wenn sie sich einloggen, sie auf eine Seite gebracht werden, wo die Artikel, die sie bestellen, aus einer DB abgerufen werden Es ist also dynamisch und anders für alle Kunden. Einige Kunden haben mehr als 50 Artikel, so dass sie in den Eingabefeldern ab und zu sehen, was sie bisher bestellt haben. Ich versuche Javascript, um zwischen der vollständigen Bestellliste und nur um zu sehen, was sie eine Menge neben platziert haben. Abrufen der Elemente über PHP, ich legte jedes Array-Element in einem ABSCHNITT dann eine DIV CLASS = "W3-Third ..".

Unten ist der untere Teil des PHP-Pull; Das letzte LIST-Element ist das Mengenfeld und ich habe einen SPAN darum gelegt, um es für die Zählung zu erfassen.

und darunter ist die Javascript Ich versuche, (ich bin neu zu Codierung und zum ersten Mal eine Frage hier zu fragen):

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

und das Javascript, wo nichts passiert:

<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 

Wenn ich nur das Javascript unten benutze und auf den Knopf klicke, bekomme ich die korrekte Zählung, also es Wenn ich das SPAN lese, mache ich eindeutig etwas falsch mit der for-Schleife.

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

Ich habe auch versucht, diese unten, aber es schaltet alle 33 Abschnitte zunächst, und wenn ich eine Menge in einem Abschnitt Eingabefeld setzen, ist es nicht zu wechseln, dann, wenn ich eine Menge in einem zweiten setzen Abschnitt, es schaltet usw.

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

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

Ich bin mir nicht sicher, ob ich eine Kombination der beiden oder etwas ganz anderes brauche. Ich habe seit Tagen online gesucht, aber alles, was ich finden kann, sind Themen zum Umschalten von 1 Element oder 1 Elementtyp. Bitte helfen .. Vielen Dank im Voraus.

Answer 1

@mfink ..und an alle anderen, die dies sehen ... Ok, ich habe etwas gefunden, das mir geholfen hat, mein Problem zu lösen; Ich brauchte auch eine Live-Suchoption und fand ein Skript (http://www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/), wo ich nur den Selektor ändern musste, um meinen zu entsprechen und die Klasse "allitems" zu meinem SECTION hinzuzufügen. Unten ist der Live-Suchskript:

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

und unten ist, wie ich es änderte meine gepostet Frage zu lösen; Habe ich es, so dass es durch alle Eingabetyp ‚Text‘ Schleifen und wenn es leer ist, es schaltet es:

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

ich es ein paar Mal getestet haben, auch wenn es an die DB einreichen, und es hat gearbeitet, . Wenn jemand einen Fehler/eine Schwachstelle sieht, würde ich gerne darüber Bescheid wissen. @mfink, danke, dass du es für mich angeschaut hast!