нажимайте на вопросы да / нет из OPML по одному - PullRequest
Новая
       27

нажимайте на вопросы да / нет из OPML по одному

4 голосов
/ 24 сентября 2011

На основе блок-схемы, отмеченной как узлы OPML в моем xhtml, я хотел бы динамически (используя jquery, без обновления страницы) получать вопросы, показанные один за другим, в зависимости от ответа да / нет предыдущего, до тех пор, покапоследнее сообщение в OPML достигнуто.Например;

В: У вас есть домашнее животное?
A: да

Q: Это большой?
A: да

Q: Это собака?
A: да

Финал: Обратите внимание, что собаки не допускаются на это мероприятие!

Механизм аналогичен предложенному в этом вопросе SO .Однако это должно быть закодировано для каждого вопроса и ответа.Я ищу способ кодирования чего-то, при чем вы можете использовать любой OPML, и он автоматически создаст такое поведение.

[править] Как читабельный откат при отключенном javascript и во избежание анализа внешнихOPML, может быть лучше использовать XOXO контурный микроформат вместо OPML.

1 Ответ

0 голосов
/ 13 апреля 2012

Вы можете сделать что-то вроде этого: 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);                
        });
    });
...