为什么 Jquery 不使用引导类隐藏我的 div，而是使用引导行？答案

【问题标题】：Why Jquery not hiding my div with bootstrap classes instead working with bootstrap row?为什么 Jquery 不使用引导类隐藏我的 div，而是使用引导行？
【发布时间】：2021-04-22 18:09:02
【问题描述】：

我正在尝试使用 jquery 在我的 html 中隐藏两个 div。一个工作正常，但另一个不工作。正在工作的div 只有一个类class='row'，而没有工作的div 有class='p-2 d-flex pt-3'

当我将这个不起作用的 div 更改为 row 时，它就起作用了。我不知道为什么这不适用于其他类？

$("#selOpt").change(function() {
  $(this).find("option:selected").each(function() {
    var value = $(this).attr("value");

    if (value == 'wic') {
      $("#cus-note").hide();
      $("#cus-dues").hide();
    } else {
      $("#cus-note").show();
      $("#cus-dues").show();
    }
  });
}).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selOpt" multiple>
  <option value="">Select...</option>
  <option value="wic">Wic</option>
  <option value="foo">Foo</option>
</select>

<!-- working -->
<div class="row cus-note" id="cus-note">
  <textarea type="text" class="form-control note-field" name="cust_note" value="" id="cust_note" placeholder="New Note..." required></textarea>
</div>

<!-- not working -->
<div class="p-2 d-flex pt-3" id="cus-dues">
  <div class="col-8">Dues</div>
  <div class="ml-auto" id="cust_dues"></div>
</div>

【问题讨论】：

只是猜测，可能与您在应用中引用的库/css 的顺序有关
我不这么认为，因为如果那会是一个问题，那么两个 div 都不应该工作。问题是这仅适用于class ='row' 情况，而当我更改课程时它不会。
我将您问题中的代码编辑到一个可以正常工作的 sn-p 中。我们无法在不查看问题原因的情况下调试问题。因此，您能否在本地副本的 devtools 中检查控制台并报告它列出的任何问题。
when i change class of this not working div to row then it works 这意味着它可能与 CSS 规则特异性有关。检查 DOM 以查看应用了哪些类/内联样式。
感谢您的回复@RoryMcCrossan。我只是想通了这个案子。在第二个div 中，我使用的是d-flex，当我在引导程序中检查它时，它使用display: flex !important;，它覆盖了.hide() 函数。所以我设法解决了这个问题及其现在的工作。

标签： javascript html jquery bootstrap-4

【解决方案1】：

不工作的div 有class='p-2 d-flex pt-3' 实际上是d-flex 类。因为d-flex 类的display 属性值为flex，它是由!important 强制执行的 d-flex 的 css 规则如下所示

.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}

因此，当您尝试通过 jQuery hide() 方法隐藏 div 时，它会尝试添加内联 CSS style="display: none;"，但不幸的是它被 display: flex!important; 覆盖，这就是您的 div 不应隐藏的原因。

您可以使用display: none!important; 创建一个类并添加/删除该类而不是show()/hide()

css 规则示例：

html body .display-none {
    display: none!important;
}

注意：我通过嵌套 html 和 body 来创建这个规则，以便这个规则可以获得高优先级。此外，最好将此 CSS 放在所有 CSS 的最后，这样优先级会更高。

$("#selOpt").change(function() {
  $(this).find("option:selected").each(function() {
    var value = $(this).attr("value");

    if (value == 'wic') {
      $("#cus-note").addClass('display-none');
      $("#cus-dues").addClass('display-none');
    } else {
      $("#cus-note").removeClass('display-none');
      $("#cus-dues").removeClass('display-none');
    }
  });
}).change();

我在这里给出了 sn-p

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <style>
    html body .display-none {
        display: none!important;
    }
    </style>
</head>
<body>

<select id="selOpt" multiple>
  <option value="">Select...</option>
  <option value="wic">Wic</option>
  <option value="foo">Foo</option>
</select>

<!-- working -->
<div class="row cus-note" id="cus-note">
  <textarea type="text" class="form-control note-field" name="cust_note" value="" id="cust_note" placeholder="New Note..." required></textarea>
</div>

<!-- not working -->
<div class="p-2 d-flex pt-3" id="cus-dues">
  <div class="col-8">Dues</div>
  <div class="ml-auto" id="cust_dues"></div>
</div>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script>
$("#selOpt").change(function() {
  $(this).find("option:selected").each(function() {
    var value = $(this).attr("value");

    if (value == 'wic') {
      $("#cus-note").addClass('display-none');
      $("#cus-dues").addClass('display-none');
    } else {
      $("#cus-note").removeClass('display-none');
      $("#cus-dues").removeClass('display-none');
    }
  });
}).change();    
</script>
</body>
</html>

【讨论】：

谢谢你的回答我刚刚做了这部分，你猜怎么着，它奏效了。它运行完美。
非常欢迎您，也很高兴听到它运行良好。另外，您可以将此答案标记为有用，以便新手可以轻松获得答案。