使用jQuery隐藏类中的所有元素

Question

我是Java的新手，很喜欢它，但现在遇到的问题令我有些困惑。

我在下面编写了代码，以使用male类隐藏所有元素，但是它不起作用。 当我用一个id代替class male ，代码开始工作。

 <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> 

我真的不知道如何解决这个问题。 请帮助我。

Answer 1

您的html中不能有两个class属性，设置多个class是在同一属性上，每个class之间都有一个空格。

像这样更改代码：

class="form-row male"

然后它应该工作。

Answer 2

这是因为您具有元素的double class属性，这意味着只有第一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");
    });
});

Answer 3

尝试更改为此：

 <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">

Answer 4

class =“ form-row” class =“ male”

应该替换为

class =“ form-row male”

Answer 5

原因是您拥有在同一元素上多次声明class相同属性。

为单个元素多次声明同一属性（无效的HTML），将使第一个值覆盖同一属性的所有后续值。

因此，在这种情况下，您的元素只需具有一个class属性

此行为在此处解释Attribute-name-state

<div class="form-row male">

JSFIDDLE