Question

我正在为我们的客户建立在线订购系统，当他们登录时，他们会被带到一个页面，在那里他们订购的商品是从数据库中检索出来的，因此它是动态的并且对所有客户都不同。一些客户有超过50个项目，因此他们在输入字段中大量输入数量，他们偶尔会看到他们目前订购的内容。我尝试使用javascript在完整的订单列表之间切换，只是为了查看他们旁边放置了数量的内容。通过php检索项目，我将每个数组项目放在SECTION中然后放入DIV CLASS =＆＃34; w3-third ..＆＃34;。

下面是php pull的底部;最后一个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>

我也在下面尝试了这个，但它最初切换了所有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/），我只需更改选择器以匹配我的并添加＆＃39; allitems＆＃39;我的部分课程。以下是实时搜索脚本：

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

以下是我如何更改它以解决我发布的问题;我更改了它，因此它遍历所有输入类型＆＃39; text＆＃39;如果它是空白的，它会切换它：

$(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，谢谢你为我调查！

需要在仅具有输入值的所有部分和部分之间切换

1 个答案: