根據跨度中的動態值顯示/隱藏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函數在文檔准備好時被注冊為回調函數（該事件僅發生一次，因此您的函數不會再次運行），但是您需要在span值時運行它更改，因此您需要將其連接到該事件。

您還需要將.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();
     };

}

Answer 2

更改以下代碼以將字符串值解析為整數。

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