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);当用户到达第三个问题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++; 
    }); 
}); 

试试看看这个代码。

当U调用

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

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

执行第一$(yes).click后，继续执行第二$(yes).click，因此这个问题你正面临着。

我建议的方法是把填充UR所有“问题”到一个数组，然后使用一个索引计数填充<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>