jquery - 一次单击一次来自OPML的是/否问题

根据我的xhtml中标记为OPML节点的流程图，我想动态地（使用jquery，而不刷新页面）逐一显示问题，具体取决于上一个的是/否答案，直到出现最后一条消息。达到OPML。例如;


问：你有宠物吗？答：是的
问：大吗？答：是的
 问：是狗吗？答：是的
 结束：请注意，此活动不允许狗入内！

该机制类似于提出的in this SO question。但是，需要对每个问题和答复进行编码。我正在寻找一种可以编写任何OPML的代码，它将自动创建该行为。

[edit]作为关闭javascript时的可读备用，并且为了避免解析外部OPML，最好使用XOXO an outline microformat代替OPML。

最佳答案

您可以执行以下操作：http://jsfiddle.net/kayen/fGrT2/

HTML：

<div id="petTest">
    <fieldset>
        <legend>Do you have a pet?</legend>
        <ul>
            <li><label for=""><input type="radio" name="petstatus" value="Yes" /> Yes</label></li>
            <li><label for=""><input type="radio" name="petstatus" value="No" /> No</label></li>
        </ul>
    </fieldset>

    <fieldset>
        <legend>Is it big?</legend>
        <ul>
            <li><label for=""><input type="radio" name="petsize" value="Yes" /> Yes</label></li>
            <li><label for=""><input type="radio" name="petsize" value="No" /> No</label></li>
        </ul>
    </fieldset>

    <fieldset>
        <legend>Is it a dog?</legend>
        <ul>
            <li><label for=""><input type="radio" name="pettype" value="Yes" /> Yes</label></li>
            <li><label for=""><input type="radio" name="pettype" value="No" /> No</label></li>
        </ul>
    </fieldset>
    <fieldset>
        <legend>Please note that dogs are not allowed at this event!</legend>
    </fieldset>
</div>

jQuery的：

$("#petTest fieldset")
    .hide()
    .eq(0).show()
    .end()
    .find("input[value='Yes']")
    .click(function() {
      $(this).parents("fieldset").next().show(300);
    })
    .end()
    .find("input[value='No']")
    .click(function() {
        $(this).parents("fieldset").nextAll().hide(300, function(){
            $(this).find("input").attr("checked", false);
        });
    });