我正在做一个有几个问题的调查问卷，每个问题都有自己的选项，我需要制作一个代码jquery来隐藏带有标题“问题选项”的文本区域，因此选择了radiobuttons“Date，Location，有关问题的单选，多选，开/关。
因此，如果我遇到问题5，并选择“多项选择”，那么带有“问题选项”标签的“文本区域”应仅隐藏在该问题中。
注意：每个<TD>都是动态添加的，因此不止一个。
<table id="field-easy-form-question-values">
<thead>
<tr>
<th colspan="2" class="field-label">Question</th>
<th>Order</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="" id="form-question-0">
<div class="form-item">
<label for="form-question-0" class="">Question text</label>
<input class="js-text-full" id="question-0-fielde" name="field_easy_form_question[0][field_easy_form_question_text][0][value]" value="Nombre" type="text">
</div>
</div>
<div class="" id="edit-field-easy-form-question-0">
<div class="form-item">
<label for="edit-field-easy-form-question-0" class="">Question Options</label>
<div class="form-textarea-wrapper">
<textarea class="js-text-full" name="field_easy_form_question[0][field_easy_form_question_options][0][value]"></textarea>
</div>
</div>
</div>
<div class="" id="form-question-0">
<div id="edit-field-easy-form-question-0">
<div class="panel-heading">
<div class="panel-title">Type</div>
</div>
<div class="panel-body">
<div id="edit-field-easy-form-question-0">
<div class="form-item radio">
<label for="form-question-0" class="option">
<input class="form-radio" id="type-short-text" name="field_easy_form_question[0][field_easy_form_question_type]" value="Short Text" checked="checked" type="radio">Short Text</label>
</div>
<div class="form-item radio">
<label for="edit-field-easy--field-easy-form-question-type-long-text" class="option">
<input class="form-radio" id="type-long-text" name="field_easy_form_question[0][field_easy_form_question_type]" value="Long Text" type="radio">Long Text</label>
</div>
<div class="form-item radio">
<label for="edit-field-easy-form-question-0-field-easy-form-question-type-date" class="option">
<input class="form-radio" id="type-date" name="field_easy_form_question[0][field_easy_form_question_type]" value="Date" type="radio">Date</label>
</div>
<div class="form-item radio">
<label for="edit-field-easy-form-question-0-field-easy-form-question-type-location" class="control-label option">
<input class="form-radio" id="type-location" name="field_easy_form_question[0][field_easy_form_question_type]" value="Location" type="radio">Location</label>
</div>
<div class="form-item radio">
<label for="edit-field-easy-form-question-0-field-easy-form-question-type-single-selection" class="control-label option">
<input class="form-radio" id="type-single-selection" name="field_easy_form_question[0][field_easy_form_question_type]" value="Single Selection" type="radio">Single Selection</label>
</div>
</div>
</div></div>
</td>
</tr>
<tr>
<td>...</td>
</tr>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
答案 0 :(得分：0)
我希望这就是你要找的东西。我在你的HTML中修改了一些东西，它们没有正确放置，有些东西丢失了。
此外，您有多次具有相同名称的ID，不推荐使用。如果您使用Javascript或CSS，则可以使用类，否则可能会发生DOM中的冲突。我修复了其中一些，以便jQuery可以处理它。
并且不要像form-question-0那样增加名称，这一切都可以通过捕获索引来完成。
<强> HTML
<table id="field-easy-form-question-values">
<thead>
<tr>
<th colspan="2" class="field-label">Question</th>
<th>Order</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-question">
<div class="form-item">
<label for="form-question-0" class="">Question text</label>
<input class="js-text-full question-0-fielde" name="field_easy_form_question[0][field_easy_form_question_text][0][value]" value="Nombre" type="text">
</div>
</div>
<div class="edit-field-easy-form-question-0">
<div class="form-item">
<label for="edit-field-easy-form-question-0" class="question-options">Question Options</label>
<div class="form-textarea-wrapper">
<textarea class="js-text-full" name="field_easy_form_question[0][field_easy_form_question_options][0][value]"></textarea>
</div>
</div>
</div>
<div class="form-question-0">
<div class="edit-field-easy-form-question-0">
<div class="panel-heading">
<div class="panel-title">Type</div>
</div>
<div class="panel-body">
<div id="edit-field-easy-form-question-0">
<div class="form-item radio">
<label for="form-question-0" class="option">
<input class="form-radio type-short-text" name="field_easy_form_question[0][field_easy_form_question_type]" value="Short Text" checked="" type="radio">Short Text</label>
</div>
<div class="form-item radio">
<label for="edit-field-easy--field-easy-form-question-type-long-text" class="option">
<input class="form-radio type-long-text" name="field_easy_form_question[0][field_easy_form_question_type]" value="Long Text" type="radio">Long Text</label>
</div>
<div class="form-item radio">
<label for="edit-field-easy-form-question-0-field-easy-form-question-type-date" class="option">
<input class="form-radio type-date" name="field_easy_form_question[0][field_easy_form_question_type]" value="Date" type="radio">Date</label>
</div>
<div class="form-item radio">
<label for="edit-field-easy-form-question-0-field-easy-form-question-type-location" class="control-label option">
<input class="form-radio type-location" name="field_easy_form_question[0][field_easy_form_question_type]" value="Location" type="radio">Location</label>
</div>
<div class="form-item radio">
<label for="edit-field-easy-form-question-0-field-easy-form-question-type-single-selection" class="control-label option">
<input class="form-radio type-single-selection" name="field_easy_form_question[0][field_easy_form_question_type]" value="SingleSelection" type="radio">Single Selection</label>
</div>
<div class="form-item radio">
<label for="edit-field-easy-form-question-0-field-easy-form-question-type-multi-selection" class="control-label option">
<input class="form-radio type-multi-selection" name="field_easy_form_question[0][field_easy_form_question_type]" value="MultipleSelection" type="radio">Multiple Selection</label>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>...</td>
</tr>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
<强>的jQuery
我添加了一个事件，以便在您单击该标签时再次显示textarea。如果您不需要，只需删除options.click()部分。
// aliases
var multi = $('.type-multi-selection'),
txtarea = $('textarea.js-text-full'),
options = $('.question-options');
function hideOptions(clk,el) { // wrapped in a function
var clicked = clk,
idx = clicked.index(el),
txt = txtarea.eq(idx);
clk == multi ? txt.hide() : txt.show();
};
// hides the textarea when clicked on "Multiple Selection"
multi.click(function() {
hideOptions(multi,this);
});
// this shows up again if you click the label for the hidden textarea
options.click(function() {
hideOptions(options,this);
});
编辑：
我忘记了，你希望这个动作只发生在当前活跃的问题中。你去吧
答案 1 :(得分：0)
解决我的问题，如果有人服务，请把我的代码放在这里：
(function($) {
$(document).ready(function(){
jQuery('.field--name-field-easy-form-question-options').hide();
jQuery("input:radio").each(function (e) {
var $this = $(this);
if (this.checked) {
var id = $this.attr('id');
var valor = $this.val();
if ( valor == 'Single Selection' || valor == 'Multiple Selection') {
jQuery($this.parents('td').find('.field--name-field-easy-form-question-options').show());
}
}
});
jQuery('#field-easy-form-question-values tr input').on('change', function(e) {
if ( e.target.value != "Multiple Selection" && e.target.value != "Single Selection" ){
jQuery(e.target).parents('td').find('.field--name-field-easy-form-question-options').hide();
} else{
jQuery(e.target).parents('td').find('.field--name-field-easy-form-question-options').show();
}
});
});})(jQuery);