jQuery动态内容如何工作?
问题描述:
我不知道这是它叫什么,但我想做出某种基于一系列的用户可以用“是”或“否”回答问题,改变的内容交互的页面。 下面是代码的简化版本,以便更好地理解。jQuery动态内容如何工作?
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语句?
答
$(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>
标签
+0
这工作得很好。非常感谢! – Sam
答
这样做的另一种方法: 所有的问题都已经在该页面,但隐藏(除第一个)。这不是真正的动态内容,但取得了相同的结果。 注意如何存储用户值然后发送。
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>
假设你将有多个div,每个都有自己的“是”和“否”按钮,你不能用'ID =“是”'。页面上只有一个元素可以具有特定的'id'。 –
你问的不是所谓的jQuery链接。该术语完全适用于其他内容。你只是在问如何根据用户的行为制作一个动态页面。 – jfriend00
它只有一个div。这是页面的[gif](http://i.imgur.com/Zjeyuzg.gifv)。 – Sam