根据 span 中的动态值显示/隐藏 Div答案

【问题标题】：Show/Hide Div based on dynamic value in span根据 span 中的动态值显示/隐藏 Div
【发布时间】：2016-10-31 19:26:13
【问题描述】：

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

分数（span值）由以下代码计算

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

【问题讨论】：

请显示到目前为止您所描述的工作的完整代码。
我认为您的问题是您将字符串与整数进行比较。当您将字符串与整数进行比较时，请尝试在字符串上使用 .parseInt()。
不清楚您的问题在这里。您是否没有在 x 上获得正确的值，还是其他原因？顺便说一句，您的第二个 else 与第一个 else 相矛盾。只有当 x >= 4 时才会触发最后一个 else。
看起来你的显示/隐藏功能只在文档准备好时运行一次。您需要将此函数与页面交互时将发生的某些事件挂钩。
这里总是 0，因为它是硬编码的，因此隐藏 #less 和 #more div，就像你的代码告诉它的那样。你想在这里进行用户交互吗？如果是这样，那可能应该是连接到 onchange 事件等的输入。用于调试的 console.log 是你的朋友。

标签： javascript jquery html css show-hide

【解决方案1】：

正如我在 cmets 中所说，您的显示/隐藏函数正在注册为文档准备就绪时的回调函数（这只发生一次，因此您的函数不会再次运行），但您需要它随时运行跨度的值发生变化，因此您需要将其连接到该事件。

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

}

【讨论】：

是的！谢谢！

【解决方案2】：

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

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

【讨论】：