使用jQuery以特定的附加div为目标

我已经设置了一个页面，让您输入有关您孩子的信息。您可以添加另一个表单，并根据希望输入信息的子项数量删除另一个表单

然而，我的问题是，我有一个按钮，你可以勾选，它将隐藏某些形式和改变某些标签。我使用jQuery来实现这一点。但是，当我单击按钮时，它会对所有不同的子信息部分执行此操作，而不仅仅是我单击的子信息部分

通过使用

.parent（）。我也尝试过以div为目标并使用
this
。然而，这些都不起作用

问题是，每次有人单击“添加子项”时，我都会附加另一组表单。但是所有的id和类都保持不变。我认为问题是因为我有相同的ID，但是我尝试了一些方法，通过使用一个变量将一个新的数字添加到ID中，这取决于有多少个表单，每次添加ID时，我都会创建唯一的ID。这不管用，我真的很困惑

有没有一种方法可以让我瞄准他们点击按钮的表单，使其只对表单进行更改

下面是我正在使用的jQuery：

 $j = $.noConflict();
    var id_count = 0;
    var id_sub = 1;
    var htmlcode = "<div class='fieldset fieldsetAdditional' > <h2 class='legend'>Child Information</h2><span id='removechild' class='btn-removechild' style='float:right;'><div class='removeChildButton'><i class='icon-white icon-sub'></i></div><p>Remove Child</p></span> <ul class='form-lists form-list'><li class='born'> <div class='full-tbl'> <div class='born-field dob-field'> <input class='checkbox check-input hidden' name='is_born' id='born' type='checkbox'> <label class='check' for='born'>Is Your Child Born Yet?</label> </div></div></li><li class='childname'> <div class='childname-field'> <label for='childname'> Your Child's Name </label> <div class='input-box'> <input type='text' id='childname' title='First Name' maxlength='225' class='input-text'> </div></div></li><li class='gender'> <div class='gender-field'> <label for='gender' class='required'> <em>*</em> Your Child's Gender </label> <div class='input-box'> <select name='gender' class='validate-select input-select' title='gender'> <option disabled='disabled' selected='selected'>Select an option</option> <option>Boy</option> <option>Girl</option> </select> </div></div></li><li class='dob'> <div class='dob-fields'> <label for='dob' class='required'> <em>*</em> Date Of Birth </label><br/> <div class='dob-month input-box dob-field'> <select id='dob-month' name='month' class='validate-select input-select' title='month'> <option disabled='disabled' selected='selected'>Select an option</option> <option value='01'>January</option> <option value='02'>February</option> <option value='03'>March</option> <option value='04'>April</option> <option value='05'>May</option> <option value='06'>June</option> <option value='07'>July</option> <option value='08'>August</option> <option value='09'>September</option> <option value='10'>October</option> <option value='11'>November</option> <option value='12'>December</option> </select> </div><div class='dob-date input-box dob-field'> <input type='text' id='dob-date' title='date' maxlength='2' class='input-text'> </div><div class='dob-year input-box dob-field'> <input type='text' id='dob-year' title='year' maxlength='4' class='input-text'> </div></div></li></ul> </div>";
    $j(".btn-addchild").click(function() {
      $j(".child-info-content").append(htmlcode);
      id_count++;
      //        alert(id_count);
    });
    $j(".child-info-content").on('click', '#removechild', function() {
      $j(this).parents('.fieldsetAdditional').slideUp("normal", function() {
        $j(this).parents('.fieldsetAdditional').remove();
      });
      id_count = id_count - id_sub;
      //        alert(id_count);
    });
    $j('.born').on("click", ".check-input", function() {
      if (this.checked) {
        $j('.childname-field').hide();
        $j('.gender-field label').text("Your Child's Predicted Gender").append("<em>*</em>");
        $j('.input-select').append("<option class='optional'>Unknown</option>");
        $j('.dob-fields label').text("Due Date").append("<em>*</em>");
      } else {
        $j('.childname-field').show();
        $j('.gender-field label').text("Your Child's Gender").append("<em>*</em>");
        $j('.input-select .optional').remove();
        $j('.dob-fields label').text("Date Of Birth").append("<em>*</em>");
      }
    });
    $j(".fieldsetAdditional").click(function() {
      alert("test");
    });

$j=$.noConflict（）；
变量id_计数=0；
var id_sub=1；
变量htmlcode=“孩子信息删除孩子
您的孩子出生了吗
您孩子的名字
*您孩子的性别选择一个选项男孩女孩
*出生日期
选择一个选项一月二月三月四月六月七月八月九月十一月十二月
；
$j（“.btn addchild”）。单击（函数（）{
$j（“.child info content”）.append（htmlcode）；
id_count++；
//警报（id_计数）；
});
$j（“.child info content”）。在（'click'，'removechild'，函数（）上{
$j（this）.parents（'.fieldsetAdditional'）.slideUp（“normal”，function（））{
$j（this）.parents（'.fieldsetAdditional'）.remove（）；
});
id\u count=id\u count-id\u sub；
//警报（id_计数）；
});
$j（'.born'）。在（“.click”，“.check input”，函数（）上{
如果（选中此项）{
$j（'.childname字段'）.hide（）；
$j（“.gender字段标签”）.text（“您孩子的预测性别”）.append（“*”）；
$j（'.input select'）。追加（“未知”）；
$j（'.dob字段标签'）。文本（“截止日期”）。附加（“*”）；
}否则{
$j（'.childname字段'）.show（）；
$j（“.gender字段标签”）.text（“您孩子的性别”）.append（“*”）；
$j（'.input select.optional'）.remove（）；
$j（'.dob字段标签'）。文本（“出生日期”）。附加（“*”）；
}
});
$j（“.fieldsetAdditional”）。单击（函数（）{
警报（“测试”）；
});

我很抱歉，如果这是一个非常简单或愚蠢的问题，我还在学习。我也看过这里的许多其他帖子，试图找到我的答案，但我找不到解决方案，或者解决方案对我不起作用。我希望你能帮我，并提前感谢你！我希望这一切都有意义

这是我的JSFIDLE，包含了它的所有代码（除了一些样式）（
问题太多，时间太少：）

1.使用相对选择：
获取与单击的选项最近的UL并使用范围选择器。这与执行
$formlist.find（'.childname字段'）
等操作相同

e、 g

3.不要这样设置复选框的样式
您还有一些样式，当选中另一个复选框时，第一个复选框显示为选中！您也需要删除它

4.您不能复制ID
重复ID无效。浏览器将仅与第一个条目匹配，因为它们以每个键值只有一个元素的快速查找方式存储它们。将您的字段更改为使用
name
和/或
class
，问题太多，时间太少：）

1.使用相对选择：
获取与单击的选项最近的UL并使用范围选择器。这与执行
$formlist.find（'.childname字段'）
等操作相同

e、 g

3.不要这样设置复选框的样式
您还有一些样式，当选中另一个复选框时，第一个复选框显示为选中！您也需要删除它

4.您不能复制ID
重复的id无效。浏览器将仅与第一个条目匹配，因为它们以每个键值只有一个元素的快速查找方式存储它们。将您的字段更改为使用
name
和/或
class
我建议您动态创建
id
。我建议您动态创建
id
。
var $formlists = $(this).closest('.form-lists');
if (this.checked) {
    $j('.childname-field',$formlists).hide();
    $j('.gender-field label',$formlists).text("Your Child's Predicted Gender").append("<em>*</em>");
    $j('.input-select',$formlists).append("<option class='optional'>Unknown</option>");
    $j('.dob-fields label',$formlists).text("Due Date").append("<em>*</em>");
} else {
    $j('.childname-field',$formlists).show();
    $j('.gender-field label',$formlists).text("Your Child's Gender").append("<em>*</em>");
    $j('.input-select .optional',$formlists).remove();
    $j('.dob-fields label',$formlists).text("Date Of Birth").append("<em>*</em>");
}

$j(document).on("click", ".born .check-input",function() {