$( 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语句选择性地显示表单字段，而是显示两者的相同表单字段，同时为每个下拉选项保留不同的选定值，即一个下拉列表显示个人选择，另一个显示组织。每当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();
}
});
});
您遇到的问题是您正在基于类（例如.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>在您的上述代码中，个人价值与个人不符，即您需要以小写字母的形式提交个人信息.b这就是为什么价值观不匹配的原因
而不是这个“if（event.target.value =='Personal'）{”
写下这个“if（event.target.value =='personal'）{”