javascript - 根据 span 中的动态值显示/隐藏 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> 

score(跨度值)通过以下代码计算

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

正如我在评论中所述，您的显示/隐藏函数被注册为文档准备就绪时的回调函数(只发生一次，因此您的函数不会再次运行)，但您需要它在任何时候运行跨度的值发生变化，因此您需要将其连接到该事件。

您还将 .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();
     };

}