当CSS Display设置为none时，CSS Class仍然显示，从而导致JScript ID问题

Question

我遇到了一种情况，我被卡住了，不知道如何解决。我有一个联系人页面，其中有一些计算需要处理，它将无法使用Display:block和Display:none。

我的代码显示在下面：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.contactMobile{
display: none;
}

.contactDesktop{
display: block;
}
@media only screen and (max-width : 667px) {
.contactMobile{
display: block;
}
.contactDesktop{
display: none;
}
}
</style>

<section class="contactDesktop" id="contact">
<div class="container-fluid">
<form asp-action="Contact" asp-controller="Home" method="POST" role="form" class="php-email-form">
<input asp-for="Stats" type="hidden" value="99" />
<table class="tg">
<thead>
<tr>
<td class="tRow1">
contact Top Left
</td>
<td class="tRow2" rowspan="2">
<div class="form">
<div class="col-md-12 text-center">
<div class="row contactDesktop" id="submit">
<div id="chk">
<div class="col-md-12" style="padding:10px!important;text-align:left;">
<label class="text-lg-start">Add:</label>
<input id="val1" style="max-width:30px;padding:5px;border:0;text-align:center;color:white" disabled>
+<input id="val2" style="text-align:center;max-width:30px;padding:5px;border:0;color:white" disabled>
=<input style="max-width:30px;padding:5px;" name="honey" id="honey" oninput="myFunction(this.value)">
</div>
</div>
<div id="buttonCheck">
<div class="col-md-12" style="padding:5px!important;">
<div class="form-group sndBtn">
<button type="submit" style="border-radius:5px;">SEND</button>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12 form-group" style="color:red; font-size:large; font-weight: 600;">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message" style="background: darkgreen;border-radius:5px;">Your message has been sent. Thank you!<br />We will respond ASAP.</div>
</div>
</div>
</div>
</div>
</td>
<td class="tRow3" rowspan="2">
Contact Right
</td>
</tr>
<tr>
<td class="tRow4">
Contact Bottom Left
</td>
</tr>
</thead>
</table>
</form>
</div>
</section>
<section class="contactMobile" id="contact">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-3 text-center" style="margin-top:25px;">
Contact US
</div>
<div class="col-md-6" id="contactUs">
<div class="form">
<form asp-action="Contact" asp-controller="Home" method="POST" role="form" class="php-email-form">
<input asp-for="Stats" type="hidden" value="99" />                      
<div class="col-md-12 text-center">
<div id="submit" class="contactMobile row">
<div id="chkM">
<div class="col-md-12" style="padding:10px!important;text-align:left;">
<label class="text-lg-start">Add:</label>
<input id="val1M" style="max-width:30px;padding:5px;border:0;text-align:center;color:white" disabled>
+<input id="val2M" style="text-align:center;max-width:30px;padding:5px;border:0;color:white" disabled>
=<input style="max-width:30px;padding:5px;" name="honey" id="honey" oninput="myFunctionM(this.value)">
</div>
</div>
<div id="buttonCheckM">
<div class="col-md-12" style="padding:5px!important;">
<div class="form-group sndBtn">
<button type="submit" style="border-radius:5px;">SEND</button>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12 form-group" style="color:red; font-size:large; font-weight: 600;">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message" style="background: darkgreen;border-radius:5px;">Your message has been sent. Thank you!<br />We will respond ASAP.</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</section>
<script type="text/javascript">
var ranVal1 = Math.floor((Math.random() * 10), 2);
var ranVal2 = Math.floor((Math.random() * 10), 2);
var ranVal = Math.floor((ranVal1 + ranVal2), 2);
$("#val1").val(ranVal1);
$("#val2").val(ranVal2);
$('#buttonCheck').css({ 'display': 'none' });
function myFunction(val) {
if (val == ranVal) {
$('#buttonCheck').css({ 'display': 'block' });
$('#chk').css({ 'display': 'none' });
$("#Stats").val("200");
}
}
</script>

这只适用于在移动模式下隐藏桌面；但是，数学计算不起作用。在Chrome检查时，我注意到，尽管Desktop代码在我的显示器上看不到，但它仍然存在于html代码中，并且会影响JavaScript，因为ID会翻倍。

有没有其他方法可以让我只显示适用于桌面或移动设备的html代码？

Answer 1

不确定这是否是您想要的，但您可以在javascript中添加if/else语句来检查您的窗口大小&显示基于这些值的表单。您可能不想重复IDs'。请确保将适当的类添加到应该根据移动或桌面布局隐藏的div中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.contactMobile{
display: none;
}
.contactDesktop{
display: inline-block;
}
@media only screen and (max-width : 667px) {
.contactMobile{
display: inline-block;
}
.contactDesktop{
display: none;
}
}
</style>
<section class="contactDesktop" id="contact">
<div class="container-fluid">
<form asp-action="Contact" asp-controller="Home" method="POST" role="form" class="php-email-form">
<input asp-for="Stats" type="hidden" value="99" />
<table class="tg">
<thead>
<tr>
<!--
<td class="tRow1">
contact Top Left
</td>
-->
<td class="tRow2" rowspan="2">
<div class="form">
<div class="col-md-12 text-center">
<div class="row contactDesktop">
<div id="chk">
<div class="col-md-12" style="padding:10px!important;text-align:left;">
<label class="text-lg-start">Add:</label>
<input id="val1" style="max-width:30px;padding:5px;border:0;text-align:center;color:#666" disabled>
+ <input id="val2" style="text-align:center;max-width:30px;padding:5px;border:0;color:#666" disabled>
= <input style="max-width:30px;padding:5px;" name="honey" id="honey" oninput="myFunction(this.value)">
</div>
</div>
<div id="buttonCheck" class="contactMobile">
<div class="col-md-12" style="padding:5px!important;">
<div class="form-group sndBtn contactMobile">
<button type="submit" id="sendIT" style="border-radius:5px;">SEND</button>
</div>
</div>
</div>
</div>                                  

</div>
</div>
</td>
<!--
<td class="tRow3" rowspan="2">
Contact Right
</td>
-->
</tr>
<!--
<tr>
<td class="tRow4">
Contact Bottom Left
</td>
</tr>
-->
</thead>
</table>
</form>
<div class="row">
<div class="col-md-12 form-group" style="font-size:large; font-weight: 600;">
<div class="loading contactMobile" style="color:#cc0000;">Loading</div>
<div class="error-message"></div>
<div class="sent-message contactMobile" id="sent-message" style="color:#fff;background: darkgreen;border-radius:5px;padding:10px;">Your message has been sent. Thank you!<br />We will respond ASAP.</div>
</div>
</div>
</div>
</section>
<section class="contactMobile" id="contactM">
<div class="container-fluid">
<div class="row justify-content-center">
<!--
<div class="col-md-3 text-center" style="margin-top:25px;">
Contact US
</div>
-->
<div class="col-md-6" id="contactUs">
<div class="form">
<form asp-action="Contact" asp-controller="Home" method="POST" role="form" class="php-email-form">
<input asp-for="Stats" type="hidden" value="99" />                      
<div class="col-md-12 text-center">
<div class="contactMobile row">
<div id="chkM">
<div class="col-md-12" style="padding:10px!important;text-align:left;">
<label class="text-lg-start">Add:</label>
<input id="val1M" style="max-width:30px;padding:5px;border:0;text-align:center;color:#666" disabled>
+ <input id="val2M" style="text-align:center;max-width:30px;padding:5px;border:0;color:#666" disabled>
= <input style="max-width:30px;padding:5px;" name="honey" id="honey2" oninput="myFunctionM(this.value)">
</div>
</div>
<div id="buttonCheckM" class="contactDesktop">
<div class="col-md-12" style="padding:5px!important;">
<div class="form-group sndBtn contactDesktop">
<button type="submit" id="sendITM" style="border-radius:5px;">SEND</button>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-md-12 form-group" style="font-size:large; font-weight: 600;">
<div class="loading contactDesktop" style="color:#cc0000;">Loading</div>
<div class="error-message"></div>
<div class="sent-message contactDesktop" style="color:#fff;background: darkgreen;border-radius:5px;padding:10px;">Your message has been sent. Thank you!<br />We will respond ASAP.</div>
</div>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</section>
<script type="text/javascript">
var width = $(window).width();
var height = $(window).height();
if ((width >= 667) && (height>=768)){
$("#honey").focus();
var ranVal1 = Math.floor((Math.random() * 10), 2);
var ranVal2 = Math.floor((Math.random() * 10), 2);
var ranVal = Math.floor((ranVal1 + ranVal2), 2);
$("#val1").val(ranVal1);
$("#val2").val(ranVal2);
function myFunction(val){
if (val == ranVal) {
$('#buttonCheck').show();
$('.sndBtn').show();
$('#chk').hide();
$("#Stats").val("200");
$(".loading").show().fadeOut('slow');
$("#sendIT").on("click", function(){
$(".sent-message").show();
});
}
}
}else{
$("#honey2").focus();
var ranVal1 = Math.floor((Math.random() * 10), 2);
var ranVal2 = Math.floor((Math.random() * 10), 2);
var ranVal = Math.floor((ranVal1 + ranVal2), 2);
$("#val1M").val(ranVal1);
$("#val2M").val(ranVal2);
function myFunctionM(val) {
if (val == ranVal) {
$('#buttonCheckM').show();
$('.sndBtn').show();
$('#chkM').hide();
$("#Stats").val("200");
$(".loading").show().fadeOut('slow');
$("#sendITM").on("click", function(){
$(".sent-message").show();
});    
}
}
}
</script>