根据变量值隐藏内容

Question

我正在估算价格。

如何正确编写 jQuery 函数来检查变量并根据该数量 hides/shows 相应地确定 div 元素。

所以如果我有：

a HTML div ID 'Answer'

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

$("#answer")...

一个变量（这个变量会改变）

var x = 30

现在我知道 css 隐藏 div 会是：

#answer{
visibilty:hidden;
}

隐藏检查这些特定参数的函数的正确方法是什么？例如如果 x > 20 则隐藏 etc

现在我知道有很多方法可以做到这一点，他们可能不需要 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

请注意，您还可以删除或添加 class：

$('#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 隐藏对象，但对象占用的 space 将保持占用状态。

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

根据变量值隐藏内容

Hiding content depending on variable value

javascript

jquery

css

hide

show-hide