jquery函数根据选择的选项显示/隐藏textareas

Question

我正在进行基础调查,其中一个问题是肯定/没有问题.如果用户选择"否",我想在问题下方显示一个文本区域,以便用户解释他/她无法回答的原因.如果他们单击是,则文本框保持隐藏(或隐藏,如果他们单击否并显示它).

这是我的HTML片段(是的,我正在使用表格进行格式化:-).在这种情况下,它节省了我的时间).有4个是/否问题.这只是其中之一.它们之间唯一的区别是ID名称(#explain1,#explain2,#explain3,#explain4)

<tr id="yesno1">
    <!-- yes/no1 choices --> <!-- Yes(1) No(0) -->
    <td class="center"><input name="yn1" value="1" id="yes1" type="radio"></td>
    <td class="center"><input name="yn1" value="0" id="no1" type="radio"></td>

    <!-- yes/no1 question -->
    <td class="question">
        Did you meet your goals during this program? (If no, explain.)
    </td>
</tr>

<tr class="explain-box" id="explain1">
    <td></td>
    <td></td>
    <td class="explain-text">
      <textarea name="explain1" placeholder="Please explain..."></textarea>
    </td>
</tr>

这是我的jQuery.这适用于问题一:

$(function() {
    $('.explain-box').hide();

    $('#no1').click(function() {
        $('#explain1').show();
    });

    $('#yes1').click(function() {
        $('#explain1').hide();
    });
});

我对javascript和jquery相当模糊,所以我的问题是如何在不输入每个是/否问题的每个ID的条件的情况下使jquery代码工作？我知道我可以用this某种方式,但我不知道如何去做.有人可以提供在这种情况下使用的功能的想法吗？我是否应该咬紧牙关并输入每个问题条件,因为它只有4个问题？

Answer 1

尝试使用带选择器的启动:

$(function() {
    $('.explain-box').hide();

    $('[id^=no]').click(function() {
        $(this).parents("tr").next(".explain-box").show();
    });

    $('[id^=yes]').click(function() {
        $(this).parents("tr").next(".explain-box").hide();
    });
});