根据我的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);
        });
    });

09-26 23:25