我已经设置了一个页面，可以让您输入有关您孩子的信息。您可以添加另一个表单，并为您希望输入信息的孩子数量带走另一个表单。
但是我的问题是我有一个按钮，你可以打勾，它会隐藏某些表格并更改某些标签。我使用jQuery做到这一点。但是当我点击按钮时，它会为所有不同的子信息部分而不仅仅是我点击的子信息部分。
我尝试了很多方法，使用.parent() .parents() .children() .siblings() .find()。我还尝试使用this来定位div。然而，这一切都不起作用。
问题是，每次有人点击＆＃34;添加子＆＃34;时，我会附加另一组表单。但所有的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");
});
如果这是一个非常简单或愚蠢的问题，我很抱歉，我还在学习。我也在这里查看了很多其他帖子，试图找到我的答案，但我找不到解决方案或解决方案对我不起作用。我希望你能帮助我，并提前感谢你！我希望这一切都有意义。
这是我的JSFiddle及其所有代码（除了一些样式）（https://jsfiddle.net/benEdpa/0sLad9t5/4/）
答案 0 :(得分：0)
这么多问题，时间很少:)。
获得与所单击选项最接近的UL并使用范围选择器。这些与执行$formlists.find('.childname-field')等
e.g。
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>");
}
您委派的click处理程序也不正确。它应该针对一个不会改变的祖先：
$j(document).on("click", ".born .check-input",function() {
当您勾选另一个复选框时，您还有一些样式会导致第一个复选框显示为已选中！你也需要删除它。
重复ID无效。浏览器只匹配第一个条目，因为它们将它们存储在快速查找中，每个键值只有一个元素。更改您的字段以使用name和/或class。