Question

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

我编写了下面的代码来隐藏类male的所有元素，但它不起作用。当我用male替换班级id时，代码就开始工作了。

＆＃13;

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

＆＃13;

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

Answer 1

您的html中不能有两个class属性，设置多个class的方式属于同一属性，每个class之间有一个空格。

更改您的代码：

class="form-row male"

然后它应该工作。

Answer 2

这是因为您对元素有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");
    });
});

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

类=＆＃34;形式排＆＃34;类=＆＃34;男性＆＃34;

应替换为

class =＆＃34; form-row male＆＃34;

Answer 5

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

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

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

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

<div class="form-row male">

JSFIDDLE

使用jquery隐藏类的所有元素

5 个答案: