Question

显示或隐藏无效。即使我选择了一个应该隐藏它的选项，div仍继续显示。但是，如果我在控制台日志中，它会显示相应的显示/隐藏输出。以下是示例代码：

$('#categoryt').change(function() {
  selection = $(this).val();
  console.log(selection);
  if (selection == "2") {
    console.log("show");
    $('#Subjectd').show();
  } else {
    console.log("hide");
    $('#Subjectd').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="insert.php">
  <div class="form-group" id="formdiv">
    <label for="Category">Category</label>
    <select class="custom-select" id="categoryt">
      <option selected>Choose Role</option>
      <option value="1">Student</option>
      <option value="2">Teacher</option>
      <option value="3">Animation Designer</option>
      <option value="4">Content Verifier</option>
      <option value="5">Admin</option>
    </select>
  </div>

  <div class="form-group" id="formdiv">
    <label for="Name">Name</label>
    <input type="text" id="Name" name="Name" placeholder="Name" class="form-control" />
  </div>

  <div class="form-group" id="formdiv" id="Schoold">
    <label for="School">School</label>
    <input type="text" id="School" name="School" placeholder="School" class="form-control" />
  </div>

  <div class="form-group" id="formdiv" id="Subjectd">
    <label for="Subject">Subject</label>
    <input type="text" id="Subject" name="Subject" placeholder="Subject" class="form-control" />
  </div>

  <div class="form-group" id="formdiv" id="Classd">
    <label for="Class">Class</label>
    <input type="text" id="Class" name="Class" placeholder="Class" class="form-control" />
  </div>

Answer 1

您的元素中有两个ID

<div class="form-group" id = "formdiv" id = "Subjectd">

更改为

<div class="form-group" id = "Subjectd">

请记住，您的元素只能有一个ID，并且您的ID在整个页面中必须是唯一的。这意味着您永远不应有两个共享相同ID的元素。另一方面，类可以由多个元素共享，并且单个元素上可以有多个类。

即

<div class="form-group class_two class_three">

Div显示/隐藏不起作用？

1 个答案: