Question

我有一个简单的要求：基于用户对特定的回答是没有问题，向他展示另一个问题。

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

<script src="http://code.jquery.com/jquery-latest.js"></script>
<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

元素可以包含任意数量的类。

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

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

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

Answer 2

您可以通过首先访问您知道的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 
})

Answer 3

您可以使用DOM关系来定位所需的元素，您可以使用.closest()遍历共同的祖先，然后使用.find()来获取目标元素。

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

＆＃13;

$(document).ready(function() {
  $(".form-group").hide();
  $("#r1").click(function() {
    $(this).closest("form").find(".form-group").show();
  });
  $("#r2").click(function() {
    $(this).closest("form").find(".form-group").hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <input type="radio" name="gender" id="r1" value="female">Single&nbsp;
  <input type="radio" name="gender" id="r2" value="male">Married

  <!-- Textarea -->
  <div class="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>

  <br><br><input type="submit" value="Submit">
</form>

＆＃13;

Answer 4

您可以保持类名不变，并在表单中添加一个id

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

然后在jQuery中执行此操作

$("#form1").show(); // showing the form
$("#form1").hide(); // hiding the form

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

4 个答案: