使用jquery用类隐藏所有元素
使用jquery用类隐藏所有元素
提问于 2016-07-11 05:45:29
我对javascript很陌生，也很享受它，但是我现在面临着一个让我有点困惑的问题。
我编写了下面的代码，用类male隐藏所有元素，但它不起作用。当我用一个male替换类id时，代码就开始工作了。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="form-register" method="post" action="">
<div class="form-title-row">
<h1>Create an account</h1>
</div>
<div class="form-row">
<label>
<span>Gender</span>
<select name="register_as" id="dropdown">
<option value="none">Select One</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</label>
</div>
<div class="form-row" class="male">
<label>
<span>First Name</span>
<input type="text" name="firstname">
</label>
</div>
<div class="form-row" class="male">
<label>
<span>Last Name</span>
<input type="text" name="lastname">
</label>
</div>
<div class="form-row">
<label>
<span>Email</span>
<input type="email" name="email">
</label>
</div>
<div class="form-row">
<button type="submit">Register</button>
</div>
<script>
$(document).ready(function(){
$(".male").hide();
$("#dropdown").change(function(){
if ($("#dropdown").val() == "male") {
$(".male").show();
} else {
$(".male").hide();
}
});
});
</script>
</form>
我真的不知道如何解决这个问题。请帮帮我。
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-07-11 05:49:43
这是因为元素具有双重class属性，这意味着只有第一个class才会生效，并且导致没有类.male的元素
可以使用相同class属性中的空间列出多个类：
<div class="form-row male">优化JS码
您可以使用.toggle(true/false)来判断元素是否必须隐藏或显示。
此外，我建议为.male：.male {display: none;}添加css，以防止在JS仍在处理时显示元素。
$(document).ready(function(){
$(".male").hide();
$("#dropdown").change(function(){
$(".male").toggle($("#dropdown").val() == "male");
});
});Stack Overflow用户
发布于 2016-07-11 05:48:55
在html中不能有两个class属性，设置多个class的方法是在相同的属性上在每个class之间留出一个空格。
更改代码如下：
class="form-row male"那就应该管用了。
Stack Overflow用户
发布于 2016-07-11 05:49:39
试着改变如下：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="form-register" method="post" action="">
<div class="form-title-row">
<h1>Create an account</h1>
</div>
<div class="form-row">
<label>
<span>Gender</span>
<select name="register_as" id="dropdown">
<option value="none">Select One</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</label>
</div>
<div class="form-row male">
<label>
<span>First Name</span>
<input type="text" name="firstname">
</label>
</div>
<div class="form-row male">
<label>
<span>Last Name</span>
<input type="text" name="lastname">
</label>
</div>
<div class="form-row">
<label>
<span>Email</span>
<input type="email" name="email">
</label>
</div>
<div class="form-row">
<button type="submit">Register</button>
</div>
<script>
$(document).ready(function(){
$(".male").hide();
$("#dropdown").change(function(){
if ($("#dropdown").val() == "male") {
$(".male").show();
} else {
$(".male").hide();
}
});
});
</script>
</form>
我所做的就是改变这个：<div class="form-row" class="male">变成这个<div class="form-row male">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38299883
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号