javascript - 在不更改类名的情况下访问特定的 Div

Question

我有一个简单的要求:根据用户对特定是非问题的回答，向他展示另一个问题。

问题是我使用的是 Bootstrap 表单，所以我所有的 div 类都被命名为 form-group，这就是问题所在:如果我将类重命名为 form-group1，我的网站形状将被取消配置...某种形式元素出现错位。

<script src="http://code.jquery.com/jquery-latest.js" />
<script>
    $(document).ready(function () {
        $(".form-group1").hide();
        $("#r1").click(function () {
            $(".form-group1").show();
        });
        $("#r2").click(function () {
            $(".form-group1").hide();
        });
    });
</script>

<form action="">
    <input type="radio" name="gender" id="r1" value="female" onClick="getResults()">Single&nbsp;
    <input type="radio" name="gender" id="r2" value="male">Married

    <!-- Textarea -->
    <div class="form-group1">
        <label class="col-md-4 control-label" for="q2">By When is your marriage scheduled?</label>
        <div class="col-md-4">
            <textarea class="form-control" id="q2" name="Q2" placeholder="e.g. FY18 Q4"></textarea>
        </div>
    </div>

    <br />
    <br />
    <input type="submit" value="Submit">
</form>

所以我的问题是如何在不更改类名的情况下访问包含文本区域的特定 div？

Answer 1

一个元素可以有任意多个类。

因此，作为替代方案，您也可以添加另一个类(以空格分隔)，而不是更改类名。这样你的 Bootstrap 样式仍然适用(因为你仍然有 form-group 类)，但你也可以添加自己的。

<div class="form-group custom-form-group">
  <label class="col-md-4 control-label" for="q2">
    By When is your marriage scheduled?
  </label>
  <div class="col-md-4">
    <textarea class="form-control" id="q2" name="Q2" placeholder="e.g. FY18 Q4"></textarea>
  </div>
</div>

然后在您的脚本中，您可以定位自定义表单组类，它应该会按预期工作。