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);的if语句？

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，因此您面临的问题。

我建议的方法是填写所有你的问题＆＃34;到一个数组，然后使用索引计数来填充<h1>标记

Answer 2

另一种方法：所有问题都已在页面上，但隐藏（第一个除外）。这不是真正的动态内容，但实现了相同的结果。注意如何存储用户值然后发送。

＆＃13;

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();
    }
}

＆＃13;

.hidden {display:none;}

＆＃13;

<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>

＆＃13;

jQuery动态内容如何工作？

2 个答案: