Показать/скрыть 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);      
    }) 
}); 

И код, который у меня есть, что в настоящее время скрывается, но не показывая дивы это

$(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 регистрируется как функция обратного вызова для того, когда документ готов (что происходит только один раз, чтобы ваша функция не запускалась снова), но вам это нужно r un, когда значение диапазона изменяется, поэтому вам нужно, чтобы он был связан с этим событием.

Вы также сравниваете строковые результаты возвращаемого значения метода .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());