javascript - jQuery 动态内容如何工作？

Question

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

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 中的那个)的回答是"is"，那么它将显示第二个问题(jQuery 中的第一个)，如果他的回答是是"is"它会显示下一个问题等等。但它所做的只是在用户单击"is"时跳转到 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 ，因此您面临的问题。

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