jquery - 具有多个字段集的表单。只需要在单击时隐藏/显示下一个文本区域，而不是所有隐藏的文本区域

Question

我有一个由“是”“否”单选按钮组成的字段集。我需要“不”来显示它自己的字段集中的隐藏文本区域，但我只能让它显示所有字段集中的所有隐藏文本区域。
这就是我想要的，但它不起作用：

 $(document).ready(function(){
      $(".failRadio").click(function(){
         var nextTextArea = $(this).next().find(".describe");
         $(nextTextArea).show(500);
      });
  });



            <fieldset>
                <legend>One</legend>
                <ol>
                    <li>
                        <label for="pass">Pass</label>
                        <input id="pass" name="foo1" type="radio">
                    </li>
                    <li>
                        <label for="fail">Fail</label>
                        <input id="fail" name="foo1" type="radio" class="failRadio" />
                    </li>
                    <li><textarea style="display: none;" class="describe">Describe:</textarea></li>
                </ol>
            </fieldset>
            <fieldset>
                <legend>Two</legend>
                <ol>
                    <li>
                        <label for="pass">Pass</label>
                        <input id="pass" name="foo1" type="radio">
                    </li>
                    <li>
                        <label for="fail">Fail</label>
                        <input id="fail" name="foo1" type="radio" class="failRadio" />
                    </li>
                    <li><textarea style="display: none;" class="describe">Describe:</textarea></li>
                </ol>
            </fieldset>

Answer 1

你可以做：

$(".failRadio").click(function(){
    $(this).closest('ol').find(".describe").show(500);
});

Answer 2

我认为你需要li在获得它的兄弟之前将标签升级到一个级别：

var nextTextArea = $(this).parent().next().find(".describe");

Answer 3

用这个...

$(".failRadio").on('click', function(){
    $('textarea').hide(500);
    $(this).parent().next().find("textarea").show(500);
});

看这个演示