jquery - 显示消息时防止跳行？

Question

我在屏幕上几乎没有用户可以搜索记录的元素。在他们输入文本并单击按钮后，他们应该会在搜索按钮旁边看到一条消息。我的代码工作正常，但我的消息跳转并影响整行。一旦消息显示，所有元素都会向下移动，当消息消失时，一切都会像往常一样返回。我想知道如何在屏幕上显示消息时防止元素跳转？我使用 div 元素，但它们显示为表格行和单元格。我使用它是因为此代码位于表单内部，并且在这种情况下使用表格不是有效的 HTML 格式/结构。这是我的代码示例:

$('#searchBtn').on('click', function(){
	$('#searchMsg').addClass("error").show().text('This field is required.').delay(4000).fadeOut('slow').queue(function(){
			    $(this).removeClass("error").dequeue();
			});
});

div.formTbl {
	display: table;
	width: 100%;
}
div.frRow {
	display: table-row;
	text-align: left;
}
div.frCell {
	display: table-cell;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}
span.info, .success, .warning, .error {
	border: 1px solid;
	margin: 5px;
	padding:5px 10px 5px 40px;
	background-repeat: no-repeat;
	background-position: 10px center;
	border-radius: 3px;
	display: block;
}
span.error {
	color: #D8000C;
	background-color: #FFBABA;
	background-image: url('../Images/error.png');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="formTbl" style="width:650px;">
  <div class="frRow">
    <div class="frCell" style="width:85px;">
      <select name="studMenu" id="studMenu">
        <option value="1">Name</option>
        <option value="3">DOB</option>
        <option value="4">Gender</option>
        <option value="5">Nationality</option>
      </select>
    </div>
    <div class="frCell" style="width:175px;">
      <input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: John, Miller" />
    </div>
    <div class="frCell" style="width:80px;">
      <input type="button" name="searchBtn" id="searchBtn" value="Search"/>
    </div>
    <div class="frCell">
      <span id="searchMsg" style="display:none;"></span>
    </div>
  </div>
</div>

工作示例:https://jsfiddle.net/dmilos89/xeLj00kg/

Answer 1

发生这种情况是因为您的错误消息的高度大于行的初始高度，因此当它出现时情况会发生一点变化。解决方法是最初为 frCell 提供固定高度以容纳新的错误消息。另一个修复方法是从 .error 中删除额外的边距，这样当错误消息显示时，您的行就不会移动以适应它。

$('#searchBtn').on('click', function(){
	$('#searchMsg').addClass("error").show().text('This field is required.').delay(4000).fadeOut('slow').queue(function(){
			    $(this).removeClass("error").dequeue();
			});
});

div.formTbl {
	display: table;
	width: 100%;
}
div.frRow {
	display: table-row;
	text-align: left;
}
div.frCell {
	display: table-cell;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}
span.info, .success, .warning, .error {
	border: 1px solid;
	padding:5px 10px 5px 40px;
	background-repeat: no-repeat;
	background-position: 10px center;
	border-radius: 3px;
	display: block;
}
span.error {
	color: #D8000C;
	background-color: #FFBABA;
	background-image: url('../Images/error.png');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="formTbl" style="width:650px;">
  <div class="frRow">
    <div class="frCell" style="width:85px;">
      <select name="studMenu" id="studMenu">
        <option value="1">Name</option>
        <option value="3">DOB</option>
        <option value="4">Gender</option>
        <option value="5">Nationality</option>
      </select>
    </div>
    <div class="frCell" style="width:175px;">
      <input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: John, Miller" />
    </div>
    <div class="frCell" style="width:80px;">
      <input type="button" name="searchBtn" id="searchBtn" value="Search"/>
    </div>
    <div class="frCell">
      <span id="searchMsg" style="display:none;"></span>
    </div>
  </div>
</div>