显示/隐藏HTML元素：更好地设置Bootstrap 4的[hidden]属性或调用jQuery的.hide（）函数？

Question

我目前正在使用Bootstrap 4，以及jQuery 3.1.1

我想在select val更改时隐藏元素。 什么是最好的解决方案？ 添加Bootstrap的[hidden]元素（参见Bootstrap：Migration to v4 ）或调用jQuery的.hide（）函数（参见jQuery的.hide（） ）？

var select = $("select[name=whatever]");
if (select.length) {
  select.change(function() {
    if (select.val() > 0) {
      $("input[name=foobar]"); // TODO Hide this element
    } else {
      $("input[name=foobar]"); // TODO Show this element
    }
  });
}

有什么建议么？

Answer 1

首先，检查元素是否存在是多余的，因为jQuery容忍在不包含元素的选择器上调用方法。 您似乎也错过了代码中的一些引号，但我认为这只是问题中的错字。

其次，元素的value以字符串形式提供，因此您需要将其解析为整数，否则在强制类型时可能会得到一些奇怪的结果。

从那里你可以简单地调用hide()和show() ：

var $select = $('select[name="whatever"]').change(function() {
    if (parseInt(this.value, 10) > 0) {
        $('input[name="foobar"]').hide()
    } else {
        $('input[name="foobar"]').show();
    }
}

您还可以通过仅使用toggle()使用状态标志来设置元素的可见性，从而使此逻辑更简洁：

var $select = $('select[name="whatever"]').change(function() {
    $('input[name="foobar"]').toggle(parseInt(this.value, 10) <= 0)
}