Question

从Spring到UI我收听了这段代码：

 <span th:text="${fromController.number}"/>

号码 - 这是DB的两倍我想做0到30,30-80和80以上的过滤器。我已经为过滤器编写了这段代码：

<div id="numberSelected">
                    <input type="checkbox" id="number01" value="1"/> 0 -30
                    <br/>
                    <input type="checkbox" id="number02" value="2"/>30 - 80<br/>
                    <input type="checkbox" id="number03" value="3"/>>80
                </div>

我不明白如何隐藏/显示我写这段代码：

  $('input').change(function() {
    var category = $(this).val();
    var arrayNumber = [];
    if (category==1){
        arrayNumber = $("[class^=number]");
        for(i=0; i<arrayNumber.length; i++){
            if (0<arrayNumber[i].innerHTML<30){
                $("[class^=number]").show();
            }else {
                $("[class^=number]").hide();
            }
            console.log(arrayNumber[i].innerHTML);
        }

在控制台中我看到了span的所有值，但是hide / show不起作用。我的错误在哪里？

Answer 1

我已经提供了一个示例实现。请检查一下是否有帮助!!!

＆＃13;

$(document).ready(function () {
        for (var i = 1; i <= 150; i++) {
            $("#myDiv").html($("#myDiv").html() + "<span class='number'> " + i + " </span>");
        }

        $('[type=checkbox]').change(function () {
            var that = this;
            var firstIntervalStart = 0;
            var firstIntervalEnd = 0;
            var secondIntervalStart = 0;
            var secondIntervalEnd = 0;
            
            hideAllSpans();

            var firstCheckBoxChecked = $("#number01").is(':checked');
            var secondCheckBoxChecked = $("#number02").is(':checked');
            var thirdCheckBoxChecked = $("#number03").is(':checked');

            if (firstCheckBoxChecked) {
                firstIntervalStart = 0;
                firstIntervalEnd = 30;
                if (secondCheckBoxChecked) {
                    firstIntervalEnd = 80;
                    if (thirdCheckBoxChecked) {
                        firstIntervalEnd = $(".number").length;
                    }
                }
                else if (thirdCheckBoxChecked) {
                    secondIntervalStart = 80;
                    secondIntervalEnd = $(".number").length;
                }
            }
            else if (secondCheckBoxChecked) {
                firstIntervalStart = 30;
                firstIntervalEnd = 80;
                if (thirdCheckBoxChecked) {
                    firstIntervalEnd = $(".number").length;
                }
            }
            else if (thirdCheckBoxChecked) {
                firstIntervalStart = 80;
                firstIntervalEnd = $(".number").length;
            }

            for (var i = firstIntervalStart; i < firstIntervalEnd; i++) {
                $($(".number")[i]).show();
            }

            if (secondIntervalStart != 0) {
                for (var i = secondIntervalStart; i < secondIntervalEnd; i++) {
                    $($(".number")[i]).show();
                }
            }

        });

        function hideAllSpans() {
            $(".number").hide();
        }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="numberSelected">
        <input type="checkbox" id="number01" value="1"/>0 -30
        <input type="checkbox" id="number02" value="2" />30 - 80<br />
        <input type="checkbox" id="number03" value="3" />>80
    </div>
    <div id="myDiv">
    </div>

＆＃13;

如何为<span>做过滤器

1 个答案: