jQuery 动态内容是如何工作的？答案

【问题标题】：How does jQuery dynamic content work?jQuery 动态内容是如何工作的？
【发布时间】：2016-08-05 00:32:30
【问题描述】：

我不知道这是否就是所谓的，但我正在尝试制作某种交互式页面，该页面会根据用户可以用“是”或“否”回答的一系列问题来更改内容。这是代码的简化版本，以便更好地理解。

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 中指定的最后一个问题。

我该如何控制它？这是我想要达到的目标的错误方式吗？如果没有多大意义，我是一个菜鸟，很抱歉。

编辑：现在我如何编写一个 if 语句来$("<img src="#">).appendTo(container);当用户到达第三个问题时？

【问题讨论】：

假设您将拥有多个 div，每个 div 都有自己的“是”和“否”按钮，您不能使用id="yes"。页面上只有一个元素可以有特定的id。
你问的不是 jQuery 链接。该术语完全适用于其他事物。您只是在询问如何根据用户的操作制作动态页面。
只有一个div。这是页面的gif。
只是一个观察...$(yes) 就像在做$($("#yes")) - 这可能有效，但是是多余的...您可以使用yes.click(...（就像您对question 所做的那样） )
@Jaromanda X 谢谢，一开始没注意到。

标签： javascript jquery html dynamic interactive

【解决方案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，因此您面临的问题。

我建议的方法是将你所有的“问题”放入一个数组中，然后使用一个索引count来填充<h1>标签

【讨论】：

【解决方案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>

【讨论】：