Question

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

我想在select val更改时隐藏元素。什么是最好的解决方案？添加Bootstrap的[hidden]元素（参见Bootstrap: Migration to v4）或调用jQuery的.hide（）函数（参见jQuery's .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)
}

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

1 个答案: