使用 jquery 隐藏带有类的所有元素

Hide all the elements with a class using jquery

本文关键字：元素 使用 隐藏 jquery      更新时间：2023-09-26

我是javascript的新手，真的很喜欢它，但我现在面临着一个让我有点困惑的问题。

我写了下面的代码来隐藏带有类male的所有元素，但它不起作用。当我用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>

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

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

像这样更改代码：

class="form-row male"

那么它应该可以工作。

这是因为元素具有双class属性，这意味着只有前class才会生效，并且导致没有具有类.male的元素

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

<div class="form-row male">

优化的JS代码

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

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

$(document).ready(function(){
    $(".male").hide();
    $("#dropdown").change(function(){
        $(".male").toggle($("#dropdown").val() == "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 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">

类="表单行" 类="男性"

应替换为

类="表单行男性"

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

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

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

此处解释了此行为 属性-名称-状态

<div class="form-row male">

吉斯菲德尔

相关文章：