jQuery 动态内容如何运作？

Question

我不知道它是不是这么叫的，但我正在尝试制作某种交互式页面，该页面会根据用户可以用 "Yes" 或 [= 回答的一系列问题来更改内容27=]。为了更好地理解，这里有一个简化版本的代码。

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 中的那个）的回答是 "yes" 那么它会显示第二个问题（第一个在 HTML 中） jQuery)，如果他的回答是 "yes"，它会显示下一个问题，依此类推。但它所做的只是在用户点击"yes".

时跳转到jQuery中指定的最后一个问题

我该如何控制它？这是实现我想要实现的目标的错误方法吗？我是菜鸟，如果没有多大意义，请见谅。

编辑：现在如何编写一个 if 语句，当用户问到第三个问题时 $("<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 后，它继续执行第二个 $(yes).click，因此您面临的问题。

我建议的方法是将所有 "questions" 填充到一个数组中，然后使用索引 count 填充 <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>

jQuery 动态内容如何运作？

How does jQuery dynamic content work?

html

javascript

jquery

interactive

dynamic