使用jquery隐藏类的所有元素

I am new to javascript and really enjoying it but I am now facing a problem which is a bit confusing to me.

我是javascript的新手并且非常享受它，但我现在面临的一个问题对我来说有点混乱。

I wrote the code below to hide all the element with a class male, but It does not work. When I replace the class male by an id the code start working.

我编写了下面的代码来隐藏所有元素与男性类，但它不起作用。当我用id替换类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>

I do not really know how to solve this problem. Kindly help me.

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

5 个解决方案

#1

It's because you have double class attribute for elements meaning only first class will take effect and leading to no elements with class .male

这是因为你有元素的双类属性意味着只有第一个类才会生效并导致没有类.male的元素

You can list multiple classes using space inside same class attribute:

您可以使用相同类属性中的空格列出多个类：

<div class="form-row male">

Optimized JS code

优化的JS代码

You can use .toggle(true/false) to tell if element must be hidden or shown.

您可以使用.toggle（true / false）来判断是否必须隐藏或显示元素。

Also I suggest add css for .male: .male {display: none;} to prevent element from being displayed while JS is still processed.

另外我建议为.male：.male {display：none;}添加css，以防止在处理JS时显示元素。

$(document).ready(function(){
    $(".male").hide();

    $("#dropdown").change(function(){
        $(".male").toggle($("#dropdown").val() == "male");
    });
});

#2

You can't have two class attributes in your html, the way to set up more than one class is on the same attribute with a space between each class.

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

Change your code like this:

像这样更改你的代码：

class="form-row male"

Then it should work.

然后它应该工作。

#3

try changing to this:

尝试改为：

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

What I did was changing this: <div class="form-row" class="male"> to this <div class="form-row male">

我做的是改变这个：

to this

#4

class="form-row" class="male"

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

should be replaced with

应该换成

class="form-row male"

class =“form-row male”

#5

The reason is you have same attribute that is class declared multiple time on same element.

原因是您具有相同的属性，即在同一元素上多次声明的类。

Declaring same attribute multiple times for a single element (Invalid HTML),will let the first value to override all subsequent values for the same attribute.

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

So in this case, your element need to have only one class attribute

因此，在这种情况下，您的元素只需要一个类属性

This behavior is explained here Attribute-name-state

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

<div class="form-row male">

JSFIDDLE

的jsfiddle

#1