基于span的动态值显示/隐藏Div。

I have a span that contains a number which is the sum of the total number of checkboxes checked in a quiz. I need to hide and show 2 different divs based on the number value of that span. This is the code I have which effectively hides the divs but is not showing them. Help!

我有一个span，它包含一个数字，它是一个测试中检查的复选框总数的总和。我需要隐藏和显示2个不同的div基于这个span的数值。这是我有效隐藏的代码，但没有显示它们。的帮助!

<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>

The score (span value) is calculated by the following code

分数(跨度值)由以下代码计算。

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

And the code that I have that is currently hiding but not showing the divs is this

我现在隐藏的代码，但没有显示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();
    };
});

2 个解决方案

#1

As I stated in the comments, your show/hide function is being registered as a callback function for when the document is ready (which only happens once so your function doesn't run again), but you need it to run whenever the span's value changes, so you'll need it connected to that event.

我在评论中说,你的显示/隐藏功能正在注册作为文档就绪时的回调函数(只发生一次,所以你的函数不再次运行),但是您需要运行只要跨度的价值发生变化,所以你需要连接到这个事件。

You also are comparing the string results of the .text() method return value against a number, so you need to convert that.

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

A simple solution would be to combine the functions:

一个简单的解决办法是把这些功能结合起来:

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

}

#2

Change the following code to parse the string value to integer.

更改下面的代码，以将字符串值解析为integer。

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

#1