gpt4 book ai didi

jquery - 当另一个元素出现时如何删除一个元素?

转载 作者:行者123 更新时间:2023-12-01 01:13:48 24 4
gpt4 key购买 nike

我使用 MaterializeCSS 来显示电子邮件表单,当电子邮件验证失败时,我想隐藏一个“线索”元素。

.input-field .clue {
color: #666;
font-family: 'Nothing You Could Do', cursive;
margin-top:-0.8rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>

<form id="testForm">
<div class="input-field">
<input id="email" type="email" class="validate" required="" aria-required="true">
<label for="email" data-error="wrong email adress" data-success="right">Email</label>
<p id="clue-email" class="clue">We don't spam, never !</p>
</div>
</form>

如果您尝试输入“test”作为电子邮件地址,警告消息和线索消息会混合在一起。我想在出现警告消息(“错误的电子邮件地址”)时隐藏线索消息(“我们不会发送垃圾邮件,永远不会!”)

我不知道应该在纯 CSS 中还是在 Jquery 中执行此操作。

感谢您的帮助,

问候,

阿克塞尔

最佳答案

由于 input 获取 invalidvalid 类,您可以添加以下 CSS 规则,隐藏所有具有 hide- 的项目on-input-message 类位于同一 input-field 中的 input 之后:

.input-field input.invalid ~ .hide-on-input-message, 
.input-field input.valid ~ .hide-on-input-message
{
display: none;
}

更新的代码片段:

.input-field .clue {
color: #666;
font-family: 'Nothing You Could Do', cursive;
margin-top:-0.8rem;
}

.input-field input.invalid ~ .hide-on-input-message, .input-field input.valid ~ .hide-on-input-message {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>

<form id="testForm">
<div class="input-field">
<input id="email" type="email" class="validate" required="" aria-required="true">
<label for="email" data-error="wrong email adress" data-success="right">Email</label>
<p id="clue-email" class="clue hide-on-input-message">We don't spam, never !</p>
</div>
</form>

关于jquery - 当另一个元素出现时如何删除一个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38785252/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com