为什么 Jquery 不使用引导类隐藏我的 div 而是使用引导行？
[英]Why Jquery not hiding my div with bootstrap classes instead working with bootstrap row?
问题描述
I am trying to hide two div in my html using jquery.
我正在尝试使用 jquery 在我的 html 中隐藏两个div 。 one is working fine but other is not working.一个工作正常，但另一个不工作。 The div which is working has just one class class='row' and the div which is not working has class='p-2 d-flex pt-3'正在工作的div只有一个 class class='row'而不工作的div有class='p-2 d-flex pt-3'
when i change class of this not working div to row then it works.当我将这个不工作的div的 class 更改为row ，它就可以工作了。 I dont know why this is not working with other classes?我不知道为什么这不适用于其他类？
$("#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>
1 个解决方案
解决方案1
0 2021-04-22 19:08:44
The div which is not working has class='p-2 d-flex pt-3' is actually for d-flex class.不工作的div有class='p-2 d-flex pt-3'实际上是d-flex class。 Because d-flex class having display property with value flex and it is forcing by !important the css rule of d-flex are given bellow因为d-flex class 具有值为flex的display属性，并且它是由!important强制的， d-flex的 css 规则如下所示
.d-flex {
display: -ms-flexbox!important;
display: flex!important;
}
So when you trying to hide that div via jQuery hide() method it trying to add an inline css style="display: none;"因此，当您尝试通过 jQuery hide()方法隐藏该div时，它会尝试添加内联 css style="display: none;" but unfortunately it is overwritten by display: flex;important;但不幸的是，它被display: flex;important;覆盖了。 that's why your div should not hide.这就是为什么你的div不应该隐藏的原因。
You can create a class with display: none;important;您可以创建一个 class display: none;important; and add/remove this class instead of show()/hide()并添加/删除此 class 而不是show()/hide()
Example of css rule: css 规则示例：
html body .display-none {
display: none!important;
}
Note: I create this rule by nesting html and body so that this rule can get high priority.注意：我通过嵌套 html 和主体来创建此规则，以便此规则可以获得高优先级。 Also, it will be better if you put this CSS at the last of your all CSS so priority will be higher.此外，最好将此 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();
I given here the snippet我在这里给出了片段
<: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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.