使用jquery隐藏类的所有元素

Question

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

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

Answer 1

你class的html中不能有两个属性,设置多个属性的方法class是在同一个属性上,每个属性之间有一个空格class.

像这样更改你的代码:

class="form-row male"

然后它应该工作.