Javascript 基于跨度中的动态值显示/隐藏Div

我有一个跨度，其中包含一个数字，它是测验中选中的复选框总数的总和。我需要根据跨度的数值隐藏和显示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> 

我有一段代码，目前正在隐藏，但没有显示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();
    };
});

$（函数（）{
var x=$（“span.yes_结果”）.text（）；
如果（x==0）{
$（“div#less”）.hide（）；
$（“div#more”）.hide（）；
}
如果（（x>0）和&（x<4））{
$（“div#less”）.show（）；
$（“div#more”）.hide（）；
}
如果（x>3），则为else{
$（“div#less”）.hide（）；
$（“div#more”）.show（）；
};
});

如我在评论中所述，您的show/hide函数将注册为回调函数，用于文档准备就绪时（只发生一次，这样您的函数就不会再次运行），但您需要在跨度值更改时运行它，因此您需要将它连接到该事件

您还需要将

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

}

$（函数（）{
$（'.yes'）.change（函数（）{
变量yes=$（'.yes:选中'）。长度
变量编号=$（'.no:选中'）。长度
$（'.yes_结果'）。文本（yes）
$（'.no_results'）。文本（no）
showHide（）；//现在，根据跨度更新显示
});
showHide（）；//现在，根据跨度更新显示
});
函数showHide（）{
//text（）方法将返回一个字符串，因此需要
//将其转换为数字，以便能够将其与数字进行比较
var x=parseInt（$（“span.yes_结果”）.text（），10）；
如果（x==0）{
$（“div#less”）.hide（）；
$（“div#more”）.hide（）；
}如果（（x>0）和&（x<4））{
$（“div#less”）.show（）；
$（“div#more”）.hide（）；
}如果（x>3），则为else{
$（“div#less”）.hide（）；
$（“div#more”）.show（）；
};
}

如我在评论中所述，您的show/hide函数将注册为回调函数，用于文档准备就绪时（只发生一次，这样您的函数就不会再次运行），但您需要在跨度值更改时运行它，因此您需要将它连接到该事件

您还需要将

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

}

$（函数（）{
$（'.yes'）.change（函数（）{
变量yes=$（'.yes:选中'）。长度
变量编号=$（'.no:选中'）。长度
$（'.yes_结果'）。文本（yes）
$（'.no_results'）。文本（no）
showHide（）；//现在，根据跨度更新显示
});
showHide（）；//现在，根据跨度更新显示
});
函数showHide（）{
//text（）方法将返回一个字符串，因此需要
//将其转换为数字，以便能够将其与数字进行比较
var x=parseInt（$（“span.yes_结果”）.text（），10）；
如果（x==0）{
$（“div#less”）.hide（）；
$（“div#more”）.hide（）；
}如果（（x>0）和&（x<4））{
$（“div#less”）.show（）；
$（“div#more”）.hide（）；
}如果（x>3），则为else{
$（“div#less”）.hide（）；
$（“div#more”）.show（）；
};
}

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

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

---

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

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

---

请展示目前为止您描述的完整代码。我认为您的问题在于您正在将字符串与int进行比较。当您将字符串与整数进行比较时，请尝试在字符串上使用.parseInt（）。不清楚您的问题是什么。你是不是没有得到x的正确值，还是其他什么？顺便说一句，你的第二个else与第一个else相矛盾。只有当x>=4时，才会触发最后一个else。看起来，当文档准备就绪时，显示/隐藏功能只运行一次。您需要将此函数连接到与页面交互时发生的某个事件中。此处它始终为0，因为它是硬编码的，因此按照代码的指示隐藏#less and#more div。你想要这里的用户交互吗？如果是这样，那可能是一个连接到onchange事件等的输入。用于调试的console.log是您的朋友。请按照您目前描述的方式显示完整的代码。我认为您的问题是您正在将字符串与int进行比较。当您将字符串与整数进行比较时，请尝试在字符串上使用.parseInt（）。不清楚您的问题是什么。你是不是没有得到x的正确值，还是其他什么？顺便说一句，你的第二个else与第一个else相矛盾。只有当x>=4时，才会触发最后一个else。看起来，当文档准备就绪时，显示/隐藏功能只运行一次。您需要将此函数连接到与页面交互时发生的某个事件中。此处它始终为0，因为它是硬编码的，因此按照代码的指示隐藏#less and#more div。你想要这里的用户交互吗？如果是这样，那可能是一个连接到onchange事件的输入，等等。用于调试的console.log是您的朋友。是的！非常感谢。对非常感谢。