2

我正在进行一项基本调查，其中一个问题是是/否问题。如果用户选择否，我想在问题下方显示一个文本区域，以便用户解释他/她不回答的原因。如果他们单击“是”，则文本框保持隐藏状态（或者如果他们单击“否”并显示它，则隐藏）。

这是我的 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 相当模糊，所以我的问题是如何让 jquery 代码工作而不为每个是/否问题的每个 ID 输入条件？我知道我可以this以某种方式使用，但我不知道该怎么做。有人可以提供在这种情况下使用的功能的想法吗？我应该硬着头皮输入每个问题条件，因为它只有 4 个问题吗？

4

3 回答 3

5

尝试使用带有选择器的开头：

$(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();
    });
});
于 2013-03-21T14:51:18.650 回答
1

您可以给复选框一个是或否类别，而不仅仅是一个 ID。然后，使用这种语法，您可以找到与之关联的文本区域。类似于以下内容：

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

    $('.no').click(function() {
        $(this).parents("tr").next().find('.explain-box').show();
    });

    $('.yes').click(function() {
        $(this).parents("tr").next().find('.explain-box').hide();
    });
});

编辑

您甚至可以通过编写一个函数来切换文本区域来进一步简化这一点：

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

    $('.checkbox').click(function() {
        var show = $(this).val() == "0";
        $(this).parents("tr").next().find('.explain-box').toggle(show);
    });
});
于 2013-03-21T14:49:53.973 回答
0

这就是我的做法——没有桌子或开关。

$('input:radio').on('change', function(){
    // compare against string value of input
    if ($(this).val() === '0')  {  
        // show textarea closest to $(this) 
        $(this).closest('div').find('textarea').show();
    }
});

演示

于 2013-03-21T15:57:27.660 回答