javascript - 在减小的屏幕尺寸中添加新行不会感知媒体查询类更改
问题描述
我的表单的一部分是一行数据,通过媒体查询响应格式化。用户可以添加额外的行。这是使用 JavaScript (jQuery) 完成的。问题是,当我克隆新行时,并没有读取媒体查询中列出的所有更改格式,而是恢复到原始样式表中的格式。
行(带有一些 PHP 的 HTML)
<div class="WFormSection BOLItems">
<div class="WTableHead">
<div class="alignleft FormCol60 WHeadText">Units</div>
<div class="space"></div>
<div class="alignleft FormCol20 WHeadText">Haz</div>
<div class="space"></div>
<div class="alignleft FormColMid WHeadText">Description of Articles</div>
<div class="space"></div>
<div class="alignleft FormCol60 WHeadText">NMFC</div>
<div class="space"></div>
<div class="alignleft FormCol60 WHeadText">Class</div>
<div class="space"></div>
<div class="alignleft FormColTiny WHeadText">Weight</div>
</div>
<div class="clear"></div>
<!--=============================== -->
<!-- R O W 0 -->
<!--=============================== -->
<div class="parent-group">
<div class="form-group">
<hr>
<div class="alignleft FormCol60 TD Inline">
<div class="ColTitle">Units: </div>
<input type="text" id="Pieces(0)" name="Pieces[0]" maxlength="5" size="4" value="<?PHP echo($Pieces[0]); ?>" class="inputtext right FirstCell" placeholder="Units">
</div>
<div class="space"></div>
<div class="alignleft FormCol20 Center TD Inline">
<div class="ColTitle">Hazmat: </div>
<label class="CBContainer CB">
<input type="checkbox" id="HM(0)" name="HM[0]" value="X" <?PHP if($HM[0]=="X"){echo('checked="Checked"');} ?>>
<span class="Checkmark"></span>
</label>
</div>
<div class="space"></div>
<div class="ColTitle">Description:</div>
<div class="alignleft FormColMid TD">
<div class="DescriptionTextarea">
<textarea class="txt" id="Descr(0)" name="Descr[0]" maxlength="53" placeholder="Description"><?PHP echo($Descr[0]); ?></textarea>
<input class="FormCol30 ChrCt" name="Output" id="Output" size="5" value="53" readonly disabled />
</div>
</div>
</div>
<div class="space"></div>
<div class="alignleft FormCol60 TD Inline">
<div class="ColTitle">NMFC: </div>
<input type="text" id="NMFC(0)" name="NMFC[0]" maxlength="10" size="8" value="<?PHP echo($NMFC[0]); ?>" class="inputtext right" placeholder="NMFC">
</div>
<div class="space"></div>
<div class="alignleft FormCol60 TD Inline">
<div class="ColTitle">Class: </div>
<?PHP echo PopSelect('Class[0]', $ClassArr, $Class[0], 'DropBox2',1,0,'',0,'','','Class(0)'); ?>
</div>
<div class="space"></div>
<div class="alignleft FormColTiny TD Inline">
<div class="ColTitle">Weight: </div>
<input type="text" id="Weight(0)" name="Weight[0]" maxlength="5" size="4" value="<?PHP echo($Weight[0]); ?>" class="inputtext right EndCell" data-datarow=0 placeholder="Weight">
</div>
<div class="space"></div>
<div class="alignleft form-group">
<a class="RowDeleteButton del" id="DeleteRow" href="javascript:void(0)"> X </a>
</div>
<div class="Clear"></div>
</div> <!-- child-group -->
<div class="clearfix"></div>
</div> <!-- parent-group -->
这里发生的是原始行是完全水平的,因此原始列标题 (WHheadText)。在较小的屏幕尺寸下,标题消失,标签 (ColTitle) 开始发挥作用。因此,在某个屏幕尺寸下,“WHeadText”类被隐藏,而“ColTitle”类出现。这在原始行中工作正常。在克隆的行中,既没有出现标题,也没有出现标签,其他格式也没有改变。
JavaScript
<script>
function CreateNewRow()
{
var ChildCount = $('.child-group').length;
if(ChildCount == 7)
{
alert("Sorry, 8 is the maximum number of rows");
}
else
{
var len = window.LastArrayValue;
window.LastArrayValue = len + 1;
$('.parent-group').clone(true, true).find(':input').each(function(idx, ele)
{
var ename = ele.name;
var eid = ele.id
var ArrayValue = len+1;
ele.name = ename.replace(/(\[\/?[^\]]*\])/g, "["+ArrayValue+"]");
ele.id = eid.replace(/(\(\/?[^\]]*\))/g, "("+ArrayValue+")");
if (typeof $(this).data('datarow') !== 'undefined'){$(this).data('datarow', ArrayValue);} // Skip if there is not a datarow attribute
if(ele.type == "checkbox"){ele.checked = false;}
else{ele.value = '';}
}).end().find('.form-group').toggle(true).end()
.toggleClass('parent-group child-group').hide()
.appendTo('#container').slideDown('slow',function()
{
$("#container").find(".FirstCell").last().focus();
});
}
}
</script>
当然,我可以使用 Javascript 发起类更改,但格式更改不止一次,并且每次您在下面看到的大多数格式都会更改,因此这是一个真正的问题,除了可能存在的差异之外,还可能检测视口通过两种不同的方法。
CSS(仅举一个例子,这里是一项媒体查询更改):
.WFormSection.BOLItems .ColTitle {display:block; padding-top:15px; width:75px; margin-right:15px; text-align:Left; clear:left; font-weight:bold;}
.WFormSection.BOLItems .CBContainer {margin-top:15px;}
.WFormSection.BOLItems .WTableHead {display:none;}
.WFormSection.BOLItems .TD {float:left;}
.WFormSection.BOLItems .DescriptionTextarea {margin-bottom:10px;}
.WFormSection.BOLItems .DescriptionTextarea textarea {width:80%;}
.BOLItems .FormColSmall, .BOLItems .FormColMedium, .BOLItems .FormColMid, .BOLItems .FormColWide {max-width:100%; padding-right:3px;}
来自原始样式表的 CSS(因为它被要求):
.WFormSection {border:1px solid #969696; padding:15px; background:url(../images/comment-form_bg.png) 0 0 repeat-x #e9e9e9; margin-bottom:15px; position:relative;}
.WFormSectionTitle {color:#0F61AC; font-weight:500; font-size:16px; width:100%; text-align:center; margin-bottom:15px;}
.WFormSection .one_third {width:28%;}
.WFormSection .one_fourth {width:20%;}
.WFormSection .one_fifth {width:16.800%;}
.WFormSection .one_half {width:40%;}
.WFormSection .Split, .TrackBox .Split {float:left; width:48%; padding:0 1%;}
.WFormSection .CheckBox {width:100%;}
.WFormSection .StateDrop, .WFormSection .DateDrop, .WFormSection .SmallDrop, .WFormSection .LongDrop {padding:10px 10px 19px 10px; margin-top:4px;}
.WFormSection.SubnitBox {padding:8px; margin-top:20px; text-align:center;}
.WFormSection.SubmitBox .RadioHorizontal {display:inline-block; margin-left:20px;}
.WFormSection.Table {padding-bottom:0; margin-bottom:0;}
.WFormSection .VerticalSpace20 {height:20px;}
.WFormSection .form-group .DescriptionTextarea {height: 54px;}
.WFormSection .form-group .DescriptionTextarea textarea {width:85%; height:100%; line-height:110%;}
.WFormSection .form-group .DescriptionTextarea .ChrCt {display:inline-block; border:none; background:transparent; margin-left:10px; color:#D78E21; font-size:16px; font-weight:600;}
.WFormSection em {display:inline; padding-left:12px; font-style:normal;}
.WHeadText {color:#000000; display:block; font-weight:600}
.WHeadText {font-size:14px; font-family:Arial, Helvetica, sans-serif; line-height:18px; width:100%; margin:3px 0; padding:7px 10px 7px 2px;}
.WFormSection .form-group .DescriptionTextarea {height: 54px;}
.WFormSection .form-group .DescriptionTextarea textarea {width:85%; height:100%; line-height:110%;}
.WFormSection .form-group .DescriptionTextarea .ChrCt {display:inline-block; border:none; background:transparent; margin-left:10px; color:#D78E21; font-size:16px; font-weight:600;}
.ColTitle {display:none;}
.CBContainer {display:block; position:relative; padding-left:24px; margin-bottom:8px; cursor:pointer; font-size:14px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.CBContainer.RB {display:inline-block; padding-left:30px;}
/* Hide the browser's default checkbox */
.CBContainer input {position:absolute; opacity:0; cursor:pointer; height:0; width:0;}
/* Create a custom checkbox */
.CBContainer.CB .Checkmark {position:absolute; top:0; left:0; height:20px; width:20px; background-color:#FFFFFF; border:1px solid #585858;}
.CBContainer.RB .Checkmark {position:absolute; top:0; left:0; height:22px; width:22px; background-color:#FFFFFF; border:1px solid #585858; border-radius:50%;}
/* On mouse-over, add a grey background color */
.CBContainer:hover input ~ .Checkmark {background-color:#CCCCCC;}
/* When the checkbox is checked, add a blue background */
.CBContainer input:checked ~ .Checkmark {background-color:#2196F3;}
/* Create the checkmark/indicator (hidden when not checked) */
.CBContainer.CB .Checkmark:after, .CBContainer.RB .Checkmark:after {content:""; position:absolute; display:none;}
/* Show the checkmark when checked */
.CBContainer input:checked ~ .Checkmark:after {display:block;}
/* Style the checkmark/indicator */
.CBContainer.CB .Checkmark:after {left:7px; top:3px; width:5px; height:12px; border:solid white; border-width:0 3px 3px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}
.CBContainer.RB .Checkmark:after {left:6px; top:6px; width:8px; height:8px; border-radius:50%; background:#FFFFFF;}
.TD {} /* Not defined in original stylesheet */
.BOLItems {} /* Not defined in original stylesheet */
/* The other FormCol settings, as well as "Space" simply define the width and padding */
解决方案
这里的问题只是一个额外的关闭 div。它已被注释掉。
推荐阅读
- python - 如何在 start_date 而不是 execution_date 上触发气流调度(使 execution_date 等于 start_date)?
- php - 请求 $request 转换为数组 $data
- javascript - 如何对数组的数组求和?
- angular - 在Angular 7中使用输入类型='File'获取文件路径,给出假路径
- c# - C#打印到网络打印机很慢
- powershell - 使用 PowerShell 加密/解密文件会产生不同的文件哈希
- in-app-purchase - 如何在 App Store 中安排 IAP 订单?
- powershell - CSV 删除没有标题名称的列
- ios - Xcode 11 (11A420a) 在使用 Command-Click 声明时不显示“嵌入 H/VStack”菜单项
- python - Mqtt 监听断开并自动重新连接