Как работает динамический контент jQuery?

Question

Я не знаю, так ли это называется, но я пытаюсь создать какую-то интерактивную страницу, которая меняет контент на основе серии вопросов, на которые пользователь может ответить "Да" или "Нет". Вот упрощенная версия кода для лучшего понимания.

HTML:

<div class="container">
            <h1>Some question?</h1>
            <h2 id="yes" role="button">Yes</h2>
            <h2 id="no" role="button">No</h2>
        </div>

JQuery:

$(function() {
    var question = $("h1");
    var yes = $("#yes");
    var no = $("#no");

    $(yes).click(function() {
        question.text("Some text. Some other question?");
    });

    $(yes).click(function() {
        question.text("Different text. Different question?")
    });

});

Теперь я хочу сделать следующее: если бы ответ пользователя на первый вопрос (тот, что в HTML) был "да", тогда он отобразил бы второй вопрос (первый в jQuery), и если его ответ на него был "да" "это будет отображать следующий вопрос и так далее. Но он просто переходит к последнему вопросу, указанному в jQuery, когда пользователь нажимает "да".

Как мне это контролировать? Это неправильный путь к тому, чего я пытаюсь достичь? Я нуб, очень жаль, если не имеет особого смысла.

Изменить: Теперь, как мне написать заявление, если будет $("<img src="#">).appendTo(container);когда пользователь дойдет до третьего вопроса?

Answer 1

$(function() {
    var count = 0;
    var question = $("h1");
    var yes = "#yes";
    var no = "#no";
    var questions = [
                      "Some text. Some other question?",
                      "Different text. Different question?"
                    ];

    $(yes).click(function() {
        if(count == 2){
            $("<img src='#'>").appendTo(container);
        }
        question.text(questions[count]);
        count++;
    });   
});

Попробуйте этот код.

Когда ты звонишь

$(yes).click(function() {
        question.text("Some text. Some other question?");
    });

$(yes).click(function() {
        question.text("Different text. Different question?")
    });

После выполнения первого $(yes).click, продолжает выполнять 2-й $(yes).click отсюда и проблема, с которой вы столкнулись.

Мой предложенный подход состоит в том, чтобы поместить все ваши "вопросы" в массив, а затем использовать индекс для заполнения <h1> тег

Answer 2

Еще один способ сделать это: все вопросы уже есть на странице, но скрыты (кроме первого). Это не настоящий динамический контент, но достижение того же результата. Обратите внимание, как пользовательские значения могут быть сохранены, а затем отправить.

function storeResponse(id_question,value){
    $('#result'+id_question).val(value);
    $('#container'+id_question).addClass("hidden");
    if (id_question<4){
        $('#container'+(id_question+1)).removeClass("hidden");
    } else {
       $('#results').submit();
    }
}

.hidden {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container1"  class="container">
            <h1>1 Some question?</h1>
            <h2 id="yes" onclick="storeResponse(1,1)" role="button">Yes</h2>
            <h2 id="no" onclick="storeResponse(1,0)" role="button">No</h2>
</div>
<div id="container2" class="container hidden" >
            <h1>2 Some question?</h1>
            <h2 id="yes" onclick="storeResponse(2,1)" role="button">Yes</h2>
            <h2 id="no" onclick="storeResponse(2,0)" role="button">No</h2>
</div>
<div id="container3" class="container hidden">
            <h1>3 Some question?</h1>
            <h2 id="yes" onclick="storeResponse(3,1)"role="button">Yes</h2>
            <h2 id="no" onclick="storeResponse(3,0)" role="button">No</h2>
</div>
<div id="container4" class="container hidden">
            <h1>4 Some question?</h1>
            <h2 id="yes" onclick="storeResponse(4,0)" role="button">Yes</h2>
            <h2 id="no" onclick="storeResponse(4,0)" role="button">No</h2>
</div>

<form id="results" action="..." method="...">
<input type="hidden" id="result1" name="result1"  value="">
<input type="hidden" id="result2" name="result1"  value="">
<input type="hidden" id="result3" name="result1"  value="">
<input type="hidden" id="result4" name="result1"  value="">
</form>