javascript - 当我更改元素显示时,文本移出 div
问题描述
我正在做一个项目,如果我想要单程航班或返回航班,我必须勾选一个复选框。如果我勾选该框,我想要一个航班,所以我只有一个输入日期可以提供。如果我取消选中我的框,我想要一个返回的航班,因此会出现第二个输入来填写返回日期。当我加载我的应用程序时,该框未选中,因此我有两个输入。可用的路线在我的输入旁边,如下所示:
如果我为单程航班勾选上面的复选框,则返回日期将消失,并且显示如下,因为我的出发路线的位置发生了变化:
知道我是否取消勾选我的复选框:
我的返回路线中元素的位置发生了变化,因为现在我的返回词不在中心,我的目的地在我的红色元素之外的一半。为什么会发生这种情况,而我的状态不能与我的第一张照片相同?感谢您的帮助。
我的代码显示可用路线:
function showDate(){
var checkbox = document.getElementById("transition");
var backDate = document.getElementById("return-box");
if(checkbox.checked==true){
backDate.style.display="none";
document.getElementById("ret").style.display="none";
document.getElementById("return-container").style.display="none";
document.getElementById("available-routes").style.top="300px";
}else if (checkbox.checked==false){
backDate.style.display="inline-block";
document.getElementById("ret").style.display="inline-block";
document.getElementById("return-container").style.display="inline-block";
document.getElementById("available-routes").style.top="200px";
}
}
.date{
padding:20px;
}
#routes-container{
position: relative;
width:200px;
height: auto;
}
#routes-container p{
text-align:center;
}
#departure-container , #return-container{
position: relative;
width:200px;
height: auto;
background-color: coral;
display: flex;
justify-content: space-between;
flex-flow:row wrap;
padding:2px;
border-radius:5px;
}
.dashline{
position:relative;
top:-3px;
}
.dep-time , .arr-time{
font-size: 20px;
}
.location-container{
display: flex;
flex-flow:row;
justify-content: space-around;
margin-left:3px;
width:200px;
}
.location-container div{
font-size:12px;
}
.dest{
margin-left:auto;
}
.plane{
margin-left:60px;
padding-bottom:3px;
}
.d2{
top:-3px;
}
.ret{
text-align:center;
}
<div id = "check-t">
<label for="transition"> <span id = "simple"> <strong> Simple transition ? </strong> </span> </label>
<input type="checkbox" id="transition" name="transition-box" onchange="showDate()" >
</div>
<div class="date" id="booked-dates">
<div id="departure-box">
<h3> Departure Date </h3>
<input type = "date" name="dep-date" class = "booking-date" id="anaxorisi">
</div>
<div id="return-box">
<h3> Return Date </h3>
<input type= "date" name= "return-date" class="booking-date" id="epistrofi">
</div>
</div>
<div class="date" id="available-routes">
<h3> Available Routes </h3>
<div id="routes-container">
<p> Departure </p>
<div id="departure-container">
<span class="dep-time"> 13:00 </span>
<span class="dashline">................ </span>
<span class="arr-time"> 14:00 </span>
<div class="location-container">
<div> ATH </div>
<div class="plane"> ✈️ </div>
<div class="dest">
KOS </div>
</div>
</div>
<br/>
<p id="ret"> Return </p>
<div id="return-container">
<span class="dep-time"> 16:00 </span>
<span class="dashline d2">................ </span>
<span class="arr-time"> 17:00 </span>
<div class="location-container">
<div>
KOS</div>
<div class="plane"> ✈️ </div>
<div class="dest dest2"> ATH </div>
</div>
</div>
</div>
即使在上面不是我完整的应用程序的片段中,我的返回路线元素中元素的位置也会改变定位
解决方案
尝试将javascript更改为:
function showDate(){
var checkbox = document.getElementById("transition");
var backDate = document.getElementById("return-box");
if(checkbox.checked==true){
backDate.style.display="none";
document.getElementById("ret").style.display="none";
document.getElementById("return-container").style.display="none";
document.getElementById("available-routes").style.top="300px";
}else if (checkbox.checked==false){
backDate.style.display="block";
document.getElementById("ret").style.display="block";
document.getElementById("return-container").style.display="flex";
document.getElementById("available-routes").style.top="200px";
}
}
这能解决问题吗?
推荐阅读
- .net - dockerfile 中的启动脚本永远不会运行
- python-3.x - Kivy 2.0 安装难点
- sql-server - 克隆表而不导入行数据
- python-3.x - 在while循环内的if语句中无法访问代码
- javascript - 开玩笑测试猫鼬唯一字段会创建重复项
- html - HTML Angular 8 - 如何缩小img
- machine-learning - 卷积神经网络的特征图和参数总数
- java - Java groupingBy 和转换字符串
- docker - 在 Jenkins 管道中的 docker 中安装卷时出现问题
- excel - Excel VBA:如何更改括号中文本的字体颜色?