![](/img/trans.png)
[英]How can I keep my resizing animation (javascript) from messing up my (css) “float” layout?
[英]How can I stop my Javascript code from messing up my predefined CSS styles?
我正在建立一个迷你电子邮件平台。 它是一个模型,并不完全是一个完整的应用程序。 我在 HTML 文件中有一些我设置了样式的虚拟电子邮件。 我添加了一个输入栏,然后使用 javascript 显示与搜索栏中的值对应的电子邮件。 我的代码有效,但它弄乱了我设置的 CSS styles 并且显示的值分散在各处。
如何确保我的 Javascript 代码符合我预定义的 CSS styles?
HTML
<section id="email">
<div class = "date-container">
<div class = "calendar-container">
<img src="./assets/icon_calender.svg" alt="">
<div>
<span>2019/12/31 - 2020/1/3</span>
</div>
</div>
<div>
<img src="./assets/icon_search.svg" alt="">
</div>
</div>
<div class = "text-container email">
<h1>Results: <span>10</span>mail(s)</h1>
<input class="search-email" type="text" placeholder="search">
</div>
<div class = "email-table">
<table>
<tr>
<th>From <span><img src="./assets/icon_arrow01.svg" alt=""></span></th>
<th>To</th>
<th>Subject</th>
<th class="date">Date <span><img src="./assets/icon_arrow01.svg" alt=""></span></th>
</tr>
<tr class="email-body">
<td>aaa@example.com</td>
<td class="second-data first-second-data">zzz.zzz@example.com</td>
<td class="third-data first-third-data">[ HR-888 ] Notice of official announcement</td>
<td>0:20</td>
</tr>
<tr class="email-body">
<td>bbb.bbbb@exam... </td>
<td class="second-data second-second-data">yyy@example.com</td>
<td class="third-data second-third-data">[web:333] "Web Contact"</td>
<td>0:10</td>
</tr>
<tr class="email-body">
<td>ccc@example.com </td>
<td class="second-data third-second-data">
<div class="text-attachment">
<span>xxx@example.com, ...</span>
<span>+1</span>
</div>
</td>
<td class="third-data third-third-data">Happy New Year! Greetings for the New Year.</td>
<td>
<div class="attachment first-clip">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>0:00</span>
</div>
</td>
</tr>
<tr class="email-body">
<td>ddd.dddd@exam...</td>
<td class="second-data fourth-second-data">
<div class="text-attachment second-text">
<span>vvv.vvv@example.com, ... </span>
<span>+1</span>
</div>
</td>
<td class="third-data fourth-third-data">[HR-887(Revised: Office Expansion Project Team)] Notice of off... </td>
<td>Jan 01</td>
</tr>
<tr class="email-body">
<td>eee@example.com</td>
<td class="second-data fifth-second-data">
<div class="text-attachment last-attachment">
<span>sss@example.com, .... </span>
<span>+2</span>
</div>
</td>
<td class="third-data fifth-third-data">[Github] Logout page</td>
<td>Jan 01</td>
</tr>
<tr class="email-body">
<td>fff.ffff@example.c... </td>
<td>qqq.qqq@example.com</td>
<td>[dev] Postfix 3.1.12 / 3.2.9 / 3.3.4 / 3.4.5</td>
<td>Jan 01</td>
</tr>
<tr class="email-body">
<td>ggg@example.com </td>
<td>ppp@example.com</td>
<td>Re: [Github] Brush-up on loading animation </td>
<td>Jan 01</td>
</tr>
<tr class="email-body">
<td>hhh.hhh@examp...</td>
<td>ooo.ooo@example.com</td>
<td>Workplace Summary for sample, Inc.: Jun 2 - Jun 9</td>
<td>
<div class="attachment">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>Jan 01</span>
</div>
</td>
</tr>
<tr class="email-body">
<td>iii@example.com</td>
<td>nnn@example.com</td>
<td>I love you</td>
<td>
<div class="attachment last-clip">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>2019/12/31</span>
</div>
</td>
</tr>
<tr class="email-body">
<td>Pablo-Diego-...</td>
<td>Pablo-Diego-José-Francisc...
</td>
<td>[info:888] ABC EQUIPMENT COMPANY</td>
<td>2019/12/31</td>
</tr>
</table>
</div>
</section>
CSS
.email{
display: flex;
justify-content: space-between;
}
.email input[type= "text"]{
border: 0;
height: 30px;
transform: translateY(10px);
font-size: 1rem;
font-family: 'Roboto', sans-serif;
}
.text-container h1{
color: #5E5D5D;
font-family: 'Roboto', sans-serif;
font-size: 1.2rem;
}
.text-container h1>span{
font-size: 1.7rem;
padding-right: 3px;
}
.text-container hr{
border-top: 1px solid #E0DEDE;
}
.image-container img{
margin: 150px auto 0px auto;
display: block;
}
#email{
width: 100vw;
height: 100vh;
}
.email-table{
width: 90%;
margin: 0px 40px 5px 0px;
}
.email-table table{
margin-left: 40px;
font-family: 'Roboto', sans-serif;
border-collapse: collapse;
width: 100%;
}
th:first-of-type>span img{
display: none;
}
td, th {
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
td{
font-size: 1.2rem;
}
td:last-of-type{
font-weight: 700;
}
.attachment{
display: flex;
justify-content: center;
width: 20%;
align-items: center;
}
.first-clip span:last-of-type{
margin-right: 20px;
}
.last-clip{
margin-left: 25px;
}
.attachment span:last-of-type{
flex-shrink: 0;
}
.attachment span:first-of-type img{
width: 20px;
height: 20px;
}
.text-attachment{
display: flex;
justify-content: space-around;
}
.text-attachment span:first-of-type{
transform: translateX(-18px);
}
.second-text{
transform: translateX(5px);
}
.text-attachment span:last-of-type{
border: 1px solid #ccc;
background-color: #5E5D5D;
color: white;
border-radius: 5px;
padding: 0px 5px;
}
.second-text span:last-of-type{
transform: translateX(-10px);
}
td img{
width: 20px;
height: 20px;
transform: translateX(-30px);
}
th{
background-color: #EEEDED;
border-top: 3px solid #dddddd;
border-bottom: 3px solid #dddddd;
}
th:not(:last-child){
color: #5E5D5D;
}
.date>span img{
height: 10px;
width: 10px;
padding-left: 3px;
}
tr:not(:first-of-type):hover{
cursor: pointer;
color: blue;
background-color: #EEEDED;
}
tr td:last-of-type>span img{
width: 10px;
height: 10px;
transform: translateX(90px);
display: none;
}
.first-clip span:last-of-type>span img{
width: 10px;
height: 10px;
transform: translateX(90px);
display: none;
}
Javascript
const searchEmail = document.querySelector('.search-email');
searchEmail.addEventListener('keyup', filterEmail);
function filterEmail (e){
const emailText = e.target.value.toLowerCase();
document.querySelectorAll('.email-body').forEach((email) =>{
const emailItem = email.innerHTML;
if(emailItem.toLowerCase().indexOf(emailText) != -1){
email.style.display ='block'
}else{
email.style.display ='none'
}
})
}
运行您的代码后,我发现您的 Javascript 在一个表格列中显示所有结果存在问题。 这是由 if 语句将所有内容显示为块引起的。 所以要解决你的问题,你只需要改变你的逻辑:
Javascript
const searchEmail = document.querySelector('.search-email');
searchEmail.addEventListener('keyup', filterEmail);
function filterEmail (e){
const emailText = e.target.value.toLowerCase();
document.querySelectorAll('.email-body').forEach((email) =>{
const emailItem = email.innerHTML;
if(emailItem.toLowerCase().indexOf(emailText) == -1)
{
email.style.display ='none'
}
else
{
email.style.display =''
}
})
}
只需将您的email.style.display ='block'
设置为email.style.display =''
。
此外,您可能需要考虑将表格宽度和 td 宽度设置为百分比,以便表格列始终保持不变,而不取决于内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.