Show/Hide Div 基于跨度中的动态值

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 函数被注册为文档准备就绪时的回调函数（只发生一次，因此您的函数不会再次运行），但是只要跨度的值发生变化，您就需要它运行，因此您需要将它连接到该事件。

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

一个简单的解决方案是结合以下功能：

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

Show/Hide Div 基于跨度中的动态值

Show/Hide Div based on dynamic value in span

html

javascript

css

jquery

show-hide