Question

基于我的xhtml中作为OPML节点记录的流程图，我想动态地（使用jquery，不刷新页面）逐个显示问题，具体取决于前一个的是/否答案，直到达到了OPML中的最终消息。例如;

问：你有宠物吗？
答：是的
问：这很大吗？
答：是的
问：这是狗吗？
答：是的

决赛：请注意，此活动不允许狗！

该机制类似于提议in this SO question的机制。但是，它需要针对每个问题进行编码并进行回复。我正在寻找一种方法来编写可以在任何OPML上编写的东西，它会自动创建该行为。

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

Answer 1

您可以执行以下操作：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);                
        });
    });

点击OPML中的是/否一次一个问题

1 个答案: