Question

我的跨度包含一个数字，它是测验中选中的复选框总数的总和。我需要隐藏并根据该范围的数值显示2个不同的div。这是我的代码，它有效地隐藏了div但没有显示它们。救命！

<div class="results center">
    Your Score Is: <span class="yes_results">0</span> 
</div>
<div id="less">less div</div>
<div id="more">more div</div>

得分（跨度值）由以下代码计算

$(document).ready(function() {
    $('.yes').change(function(){
        var yes = $('.yes:checked').length;
        var no = $('.no:checked').length;
        $('.yes_results').text(yes);
        $('.no_results').text(no);                     
    })
});

我目前隐藏但没有显示div的代码就是这个

$(function() {
    var x = $("span.yes_results").text();

    if (x == 0){
         $("div#less").hide();
         $("div#more").hide();
    }
    else if ((x > 0) && (x < 4)) {
         $("div#less").show(); 
         $("div#more").hide();
    }
    else if (x > 3) {
         $("div#less").hide(); 
         $("div#more").show();
    };
});

Answer 1

正如我在评论中所述，你的show / hide函数被注册为文件准备就绪时的回调函数（只发生一次因此你的函数不再运行），但是你需要它随时运行span的值会发生变化，因此您需要将其连接到该事件。

您还要将.text()方法返回值的字符串结果与数字进行比较，因此您需要转换它。

一个简单的解决方案是组合这些功能：

$(function() {
    $('.yes').change(function(){
        var yes = $('.yes:checked').length
        var no = $('.no:checked').length 
        $('.yes_results').text(yes)
        $('.no_results').text(no) 
        showHide();  // Now, update the display based on the span                     
    });

    showHide();  // Now, update the display based on the span

});


function showHide(){

    // The text() method will return a string, so you need to 
    // convert it to a number to be able to compare it to a number
    var x = parseInt($("span.yes_results").text(),10);

    if (x == 0){
         $("div#less").hide();
         $("div#more").hide();
     } else if ((x > 0) && (x < 4)) {
         $("div#less").show(); 
         $("div#more").hide();
     } else if (x > 3) {
         $("div#less").hide(); 
         $("div#more").show();
     };

}

Answer 2

更改以下代码以将字符串值解析为整数。

var x = parseInt($("span.yes_results").text());

根据跨度中的动态值显示/隐藏Div

2 个答案: