Скрытие содержимого в зависимости от значения переменной

Question

Я делаю оценку цены.

Как правильно написать функцию jQuery, которая проверяет переменную и в зависимости от этой суммы скрывает/показывает определенный элемент div соответственно.

Так что, если у меня было:

HTML DIV с идентификатором 'Ответ'

<div id="answer">Hide Me</div> 

$("#answer")... 

переменная (переменная изменится)

var x = 30 

Теперь я знаю CSS для скрыть div будет:

#answer{ 
visibilty:hidden; 
} 

Что было бы правильным способом скрыть функцию, проверяющую эти определенные параметры? например, если x> 20, тогда скройте и т. д.

Теперь я знаю, что будет много способов сделать это, и им может не потребоваться jQuery, пожалуйста, сообщите мне, если это так. Возможно, это просто нуждается в JS. Я знаю, что будет много способов сделать это не один, поэтому, если у вас есть другой способ, прокомментируйте, поскольку я очень хочу учиться.

Любая помощь была бы принята с благодарностью.

Приветствия

F

Answer 1

Выполнить эту функцию, обеспечивающую переменную v:

var checkVar = function(v) { 
    var target = $('#answer'); 
    if (parseInt(v) > 20) { 
     target.hide(); 
    } else { 
     target.show(); 
    } 
} 

Например, если переменная приходит образуют выбор:

$('#selectId').on('change', function() { 
    checkVar($(this).val()); 
}); 

Answer 2

Удалите CSS , Вы можете сделать это в JQuery

if(x>20){ 
$('#answer').hide(); 
} 

Answer 3

Вы можете использовать этот один

$("#answer").hide(); 

Answer 4

Обратите внимание, что вы также можете удалить или добавить класс:

$('#answer').removeClass('hide'); 
$('#answer').addClass('hide'); 

Но то, что вы хотите сделать, это $('#answer').hide(); или $('#answer').show();

Answer 5

Ответы kapantzak хорошо смотрятся. Но держите свою логику и стиль разделенными, и если вы не собираетесь использовать переменную для фактического элемента дважды, я бы этого не сделал. Так что:

var checkVar = function(var) { 
    var element = $('#answer'); 
    if (parseInt(var) > 20) { 
     element.addClass('hidden'); 
    }else{ 
     element.removeClass('hidden'); 
    } 
} 

И в вашем CSS ходу:

#answer.hidden{ 
display: none; 
} 

Кроме того, в зависимости от ваших предпочтений, display: none; ничего не объекта отображения, тогда как visibility: hidden скрывает объект, но пространство объект был оккупация останется оккупированной.

Answer 6

HTML

<input id="changingValue"> 
... 
<div id="answer">Hide Me</div> 

CSS (не обязательно, если вы проверить значения при загрузке)

#answer{ display:none;} 

JS

var limit = 20; 
$(function(){ 
    $("#changingValue").change(function(){ 
     if(parseInt($("#changingValue").val())<limit) { $("#answer").show(); } 
     else { $("#answer").hide(); } 
    }); 
});