Question

我正在制作价格估算器。

如何正确编写一个检查变量的jQuery函数，并根据该数量隐藏/显示相应的div元素。

所以，如果我有：

ID为“答案”的HTML div

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

$("#answer")...

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

var x = 30

现在我知道隐藏div的css将是：

#answer{
visibilty:hidden;
}

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

现在我知道有很多方法可以做到这一点，他们可能不需要jQuery，如果是这种情况请通知我。也许它只需要JS。我知道有很多方法可以做到这一点，而不仅仅是一个，所以如果你有不同的方式，请评论，因为我渴望学习。

非常感谢任何帮助。

干杯

F

Answer 1

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

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

但您要做的是$('#answer').hide();或$('#answer').show();

Answer 2

执行此函数，提供变量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 3

删除CSS。你可以在jQuery中做到这一点

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

Answer 4

你可以使用这个

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

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

根据变量值隐藏内容

6 个答案: