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

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

问题是我使用的是引导表单，所以我的所有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>

$（文档）.ready（函数（）{
$（“.form-group1”）.hide（）；
$（“#r1”）。单击（函数（）{
$（“.form-group1”）.show（）；
});
$（“#r2”）。单击（函数（）{
$（“.form-group1”）.hide（）；
});
});
单身
已婚的
你的结婚日期是什么时候？

---

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

您可以使用DOM关系来定位所需的元素，您可以使用遍历到公共祖先，然后使用来获取目标元素

$(this).closest("form").find(".form-group").show();

$（文档）.ready（函数（）{
$（“.form group”）.hide（）；
$（“#r1”）。单击（函数（）{
$（this）.closest（“form”）.find（“form group”）.show（）；
});
$（“#r2”）。单击（函数（）{
$（this）.closest（“form”）.find（“form group”）.hide（）；
});
});

单身
已婚的
你的结婚日期是什么时候？



您可以保持类名不变，并向表单中添加一个id，如下所示

<div id="form1" class="form-group">...</div>

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

因此，作为替代方案，您也可以添加另一个类（用空格分隔），而不是更改类名。这样，您的引导样式仍然被应用（因为您仍然有表单组类），但是您也可以添加自己的样式

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


你的结婚日期是什么时候？

然后，在脚本中，您可以将自定义表单组类作为目标，它应该按照您的预期工作。
您可以通过首先访问您知道的ID，然后遍历以下内容来访问div容器：

<input type="radio" name="gender" id="r1" data-div="q2" value="female">Female&nbsp;
<input type="radio" name="gender" id="r2" data-div="q2" value="male">Male

$("[name=gender]").on("click",function() {
  $("#"+$(this).data("div")) // textarea with known ID from data attribute
    .closest("div.form-group") // the container
    .toggle(this.value=="male"); // show or hide 
})

女性
男性
$（“[name=gender]”。在（“单击”，函数（）上）{
$（“#”+$（this.data（“div”）///textarea，具有来自数据属性的已知ID
.closest（“div.form-group”）//容器
.toggle（this.value==“male”）；//显示或隐藏
})
添加第二个类名：
class=“form group question-N”
？或者一个id:
id=“question-N”
？或者一个
id
选择器，因为您的jQuery选择需要一个唯一的标识符。如果更改或插入额外的选择器（类或id）不是一个选项，那么使用它：
$（.form group”）.children（'textarea'）.parent（$（'.form group'）.show（））在
$（“#r1”）。单击
，演示：我不想将名称更改为组1。。。我有很多div和class form group，我想访问一个特定的div…任何方法都可以。非常感谢您的帮助。问题很清楚，看起来您没有仔细阅读。我想知道，当您的答案看起来与问题完全脱节时，您是如何获得2票赞成票的。你假装你不明白投票结果。。。令人惊叹的。请在回答问题之前阅读问题，这不是一场比赛。
<input type="radio" name="gender" id="r1" data-div="q2" value="female">Female&nbsp;
<input type="radio" name="gender" id="r2" data-div="q2" value="male">Male

$("[name=gender]").on("click",function() {
  $("#"+$(this).data("div")) // textarea with known ID from data attribute
    .closest("div.form-group") // the container
    .toggle(this.value=="male"); // show or hide 
})