我陷入了在jQuery中淡入淡出的概念 [英] I am stuck with the concept of fading in and out in jQuery
问题描述
我正在开发一个在线测试应用程序，并将
xml文件中的所有问题提取到一个jsp页面中...所有问题都使用jsp中的for循环显示...
现在我不需要在一个页面中的所有问题，而是我希望他们一个一个显示为用户点击下一步按钮。所以这里是我正在使用的代码，它是
只显示第一个和第二个问题，从第三个问题，它的衰落和再次淡出...没有点击下一步按钮。 ..需要一些建议在这里...谢谢...
这里是代码：
$ $ p $ $（document） .ready（function（）{
var questions;
var counter;
var totalQuestions;
var currentQuestion = 0;
var i = 0;
totalQuestions = $（＃javapaperlist）。val（）;
questions = $（。questions）;
questions.hide（）;
$（questions.get（currentQuestion） ）.fadeIn（1000）;
$（'＃next'）。click（function（）{
$（questions.get（currentQuestion））。fadeIn（1000）;
$ fadeOut（2000）;
currentQuestion = currentQuestion + 1;
$（questions.get（currentQuestion））。fadeIn（1000）;
}）;
）};
METHOD =post>
<$ p （int i = 0; i< javapaperList.size（）; i ++）{
JavaPaper paper = javapaperList.get（）; $ p $ String text = paper.getText（）;
StringTokenizer tokens = new StringTokenizer（text，##）;
int tokensint = tokens.countTokens（）;
％>
< div class =questionsid =<％out.println（qx+ paper.getId（））;％> style =display：none>
<％
while（tokens.hasMoreTokens（））{
％>
< label class =questiontext><％= tokens.nextToken（）％>< / label>< br>
<％
}
％>
< BR>
< BR>
< INPUT TYPE =radioNAME =<％out.println（question+ paper.getId（））;％> VALUE =Aid =<％out.println（A+ paper.getId（））; ％GT; onClick =rboc（this）class =option>
<％out.println（paper.getOptiona（））;％>
< BR>
< INPUT TYPE =radioNAME =<％out.println（question+ paper.getId（））;％> VALUE =Bid =<％out.println（B+ paper.getId（））; ％GT; onClick =rboc（this）class =option>
<％out.println（paper.getOptionb（））;％>
< BR>
< INPUT TYPE =radioNAME =<％out.println（question+ paper.getId（））;％> VALUE =Cid =<％out.println（C+ paper.getId（））; ％GT; onClick =rboc（this）class =option>
<％out.println（paper.getOptionc（））;％>
< BR>
< INPUT TYPE =radioNAME =<％out.println（question+ paper.getId（））;％> VALUE =Did =<％out.println（D+ paper.getId（））; ％GT; onClick =rboc（this）class =option>
<％out.println（paper.getOptiond（））;％>
< BR>
< INPUT TYPE =radioNAME =<％out.println（question+ paper.getId（））;％> VALUE =Eid =<％out.println（E+ paper.getId（））; ％GT; onClick =rboc（this）class =option>
<％out.println（paper.getOptione（））;％>
< br>
< br>
< textarea name =<％out.println（question+ paper.getId（））;％> id =<％out.println（q+ paper.getId（））; ％GT; style =display：noneonClick =clearContents（this）><％out.println（question+ paper.getId（））;％>< / textarea>
< br>
<％
if（b！= false || x == 10）{
x ++;
％>
< BR> < / DIV>
< input type =buttonid =nextvalue =NEXT>< / input>
< BR>
<％
}
}
％>
< input type ='hidden'value =<％out.println（javapaperList.size（））;％> ID = javapaperlist/>
< input type =submitid =submitButtonvalue =Submit>
< / FORM>
您可能会淡化前一个，而不是在同一时间，
，你可以改变你的下一步按钮的ID，他们都有相同的ID，并且单击事件只绑定到第一个。所以你可以改变ID选择器类选择器，试试这个：
< input type =buttonname =nextvalue =NEXTclass =下一个>
$ b $（'。next'）。click（function（）{
$（questions.get（currentQuestion））。stop（）。fadeOut（2000，function（）{
currentQuestion = currentQuestion + 1;
$（questions.get（currentQuestion））。fadeIn（1000）;
}）;
}）;
I am developing an online test application and I am extracting all the questions from the xml file to a jsp page...All the questions are displayed using a for loop in jsp... Now i don`t want all the questions in a single page , rather i want them one by one to be displayed as the user clicks the "next" button . So here is the code what i am using and it is displaying only the first and the 2nd question and from the 3rd question on ,, its fading in and again fading out ...without clicking the "next " button...need some suggestions here...thanks... HERE IS THE CODE:
$(document).ready(function(){
var questions;
var counter;
var totalQuestions;
var currentQuestion=0;
var i=0;
totalQuestions=$("#javapaperlist").val();
questions=$(".questions");
questions.hide();
$(questions.get(currentQuestion)).fadeIn(1000);
$('#next').click(function(){
$(questions.get(currentQuestion)).fadeIn(1000);
$(questions.get(currentQuestion)).fadeOut(2000);
currentQuestion=currentQuestion+1;
$(questions.get(currentQuestion)).fadeIn(1000);
});
)};
METHOD="post">
<%
for(int i = 0; i < javapaperList.size(); i++){
JavaPaper paper = javapaperList.get(i);
String text = paper.getText();
StringTokenizer tokens = new StringTokenizer(text, "##");
int tokensint = tokens.countTokens();
%>
<div class="questions" id=<%out.println("qx" + paper.getId());%> style="display:none" >
<%
while(tokens.hasMoreTokens()){
%>
<label class="questiontext" ><%=tokens.nextToken()%></label><br>
<%
}
%>
<BR>
<BR>
<INPUT TYPE="radio" NAME=<%out.println("question" + paper.getId());%> VALUE="A" id=<% out.println("A" + paper.getId()); %> onClick="rboc(this)" class="option">
<% out.println(paper.getOptiona());%>
<BR>
<INPUT TYPE="radio" NAME=<%out.println("question" + paper.getId());%> VALUE="B" id=<% out.println("B" + paper.getId()); %> onClick="rboc(this)" class="option">
<% out.println(paper.getOptionb());%>
<BR>
<INPUT TYPE="radio" NAME=<%out.println("question" + paper.getId());%> VALUE="C" id=<% out.println("C" + paper.getId()); %> onClick="rboc(this)" class="option">
<% out.println(paper.getOptionc());%>
<BR>
<INPUT TYPE="radio" NAME=<%out.println("question" + paper.getId());%> VALUE="D" id=<% out.println("D" + paper.getId()); %> onClick="rboc(this)" class="option">
<% out.println(paper.getOptiond());%>
<BR>
<INPUT TYPE="radio" NAME=<%out.println("question" + paper.getId());%> VALUE="E" id=<% out.println("E" + paper.getId()); %> onClick="rboc(this)" class="option">
<% out.println(paper.getOptione());%>
<br>
<br>
<textarea name="<%out.println("question" + paper.getId());%>" id=<% out.println("q" + paper.getId()); %> style="display:none" onClick="clearContents(this)"><%out.println("question" + paper.getId());%></textarea>
<br>
<%
if(b!=false||x==10){
x++;
%>
<BR> </div>
<input type="button" id="next" value="NEXT" ></input>
<BR>
<%
}
}
%>
<input type='hidden' value=<%out.println(javapaperList.size());%> id="javapaperlist"/>
<input type="submit" id="submitButton" value="Submit">
</FORM>
You may fadein the next question after fadeouted the previous one,not at the same time, and you may change your id of the "next" buttons, they all have the same id,and the click event only bind to the first one.so you may change id selector to class selector, Try this:
<input type="button" name="next" value="NEXT" class="next" >
$('.next').click(function () {
$(questions.get(currentQuestion)).stop().fadeOut(2000, function () {
currentQuestion = currentQuestion + 1;
$(questions.get(currentQuestion)).fadeIn(1000);
});
});
这篇关于我陷入了在jQuery中淡入淡出的概念的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
