Question

$( document ).ready(function() {
  return $("body").on("change",".creator_name_type", function(event){
    if (event.target.value == 'Personal') {
      $(this).siblings(".organization_name").hide();
      $(this).siblings(".given_name").show();
      $(this).siblings(".family_name").show();
    } else {
      $(this).siblings(".given_name").hide();
      $(this).siblings(".family_name").hide();
      $(this).siblings(".organization_name").show();
    }
  });
});

 $(document).ready(function(){
   return $("body").on("click", ".add_creator", function(event){
  event.preventDefault();
  var creatorClass = $(this).attr('data-addCreator');
  var cloneUbiDiv = $(this).parent('div' + `${creatorClass}`).clone();
  $(`${creatorClass}` +  ':last').after(cloneUbiDiv);
        
});
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <div class="creator">
     <select class="creator_name_type">
      <option value="Personal">Personal</option>
     <option value="Organisational">Organisational</option>
    </select>
      given name: <input type="text" name="gname" class="given_name"><br>
      family name: <input type="text" name="fname" class="family_name"><br>
      organization name: <input type="text" name="oname" class"organization_name"><br>

  <a href="#" class=" add_creator" data-addCreator=".creator">Add another </a>

   <div>  
</body>
</html>

我试图根据所选选项有选择地显示表单输入。表单具有用于添加更多的按钮，这些按钮仅克隆并将克隆的html附加到div的底部。当我点击添加更多时，现在有2个选择标签，其中一个的选定值为“个人”，另一个的选定值为“组织”。它不是基于if / else语句有选择地显示表单字段，而是为两个表单显示相同的表单字段，同时为每个下拉选项保留不同的选定值，即一个下拉列表显示“ personal as selected”，另一个显示Organization。每当其中一个发生on change事件时，都会为这两个显示相同的表单字段，而不是基于if / else语句显示表单字段。

$( document ).ready(function() {
  return $("body").on("change",".creator_name_type", function(event){
    if (event.target.value == 'Personal') {
      $(".organization_name").hide();
      $(".given_name").show();
      $(".family_name").show();
    } else {
      $(".given_name").hide();
      $(".family_name").hide();
      $(".organization_name").show();
    }
  });
});

Answer 1

您遇到的问题是您正在基于类（例如.given_name）进行显示/隐藏，并且所有相似的表单字段都将具有相同的类，因此它们都一起改变。尝试使用.siblings查找要显示/隐藏的适当字段。您在选项值中还有一个错字，它是"personal"，而不是"Personal"，并且在类"="的输入中缺少organization_name。这是一个有效的代码段：

$( document ).ready(function() {
  return $("body").on("change",".creator_name_type", function(event){
    if (event.target.value == 'personal') {
      $(this).siblings(".organization_name").hide();
      $(this).siblings(".given_name").show();
      $(this).siblings(".family_name").show();
    } else {
      $(this).siblings(".given_name").hide();
      $(this).siblings(".family_name").hide();
      $(this).siblings(".organization_name").show();
    }
  });
});

 $(document).ready(function(){
   return $("body").on("click", ".add_creator", function(event){
  event.preventDefault();
  var creatorClass = $(this).attr('data-addCreator');
  var cloneUbiDiv = $(this).parent('div' + `${creatorClass}`).clone();
  $(`${creatorClass}` +  ':last').after(cloneUbiDiv);
    
});
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <div class="creator">
     <select class="creator_name_type">
      <option value="personal">Personal</option>
     <option value="organisational">Organisational</option>
    </select>
      given name: <input type="text" name="gname" class="given_name"><br>
      family name: <input type="text" name="fname" class="family_name"><br>
      organization name: <input type="text" name="oname" class="organization_name"><br>

  <a href="#" class=" add_creator" data-addCreator=".creator">Add another </a>

   <div>  
</body>
</html>

Answer 2

在上面的代码中，个人的值与个人的值不匹配，即您需要用小写字母输入个人的p。这就是为什么值不匹配的原因

代替此“ if（event.target.value =='Personal'）{“

写这个“如果（event.target.value =='personal'）{”

jQuery根据选定的下拉选项选择性显示表单输入

2 个答案: