单击下一个和上一个按钮时,如何访问JQuery中动态生成的div元素值。
我们正在创建包含问题ID,问题文本和问题选项的动态div。然后单击“下一个”和“上一个”按钮,我们一次使用jQuery从动态生成的div中显示一个问题。
现在,我想在单击下一步按钮时从当前div访问当前问题ID。
请分享简单的例子。
$(document).ready(function(){
$(".divs div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function(){
if ($(".divs div:visible").next().length != 0)
$(".divs div:visible").next().show().prev().hide();
else {
$(".divs div:visible").hide();
$(".divs div:first").show();
}
return false;
})
.click(function(e) {
e.preventDefault();
var questionPaperDetailsIdjsp =$("#questionPaperDetailsId").val(); // This not working .
alert(questionPaperDetailsIdjsp);// This not working .
});
$("#prev").click(function(){
if ($(".divs div:visible").prev().length != 0)
$(".divs div:visible").prev().show().next().hide();
else {
$(".divs div:visible").hide();
$(".divs div:last").show();
}
return false;
});
});
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="divs">
<%
ArrayList listQuestionOptions = new ArrayList<String>();
int QID = 0;
AssessmentVO allQuestions = (AssessmentVO) request.getAttribute("stuassessmentVO");
int Slength = allQuestions.getSections().size();
for (int j = 0; j < Slength; j++) {
List<QuestionVO> Qlength = allQuestions.getSections().get(j).getQuestions();
for (QuestionVO e : Qlength) {
QID++;
int NextQuestionId=Qlength.indexOf(e.getId())+1;
int Olength = e.getOptions().size();
for (int i= 0; i < Olength; i++) {
listQuestionOptions.add(e.getOptions().get(i).getOption());
}
%>
<div id="div1" class="div1 div2"> <br><%=e.getQuestionBaseType()%><br><%= QID +e.getDescription()+listQuestionOptions%>
<input type="hidden" name="questionPaperDetailsId" id="questionPaperDetailsId" value="<%=e.getId()%>">
<input type="hidden" id="tag<%=QID%>" value="<%=e.getId()%>"/>
<input type="hidden" name="NextQuestionId" id="NextQuestionId" value="<%=NextQuestionId%>">
</div>
<%
listQuestionOptions.removeAll(listQuestionOptions);
}
}
%>
</div>
<a id="next" class="btn btn-success">Next</a>
<a id="prev" class="btn btn-warning">Prev</a>
当您需要显示以前的div输入的值时,可以使用$(".divs div:visible").prev('div').find("[name=questionPaperDetailsId]")
它来找到当前可见的div,然后用于prev
获取以前的div引用,最后用于find
访问您的输入。
演示代码:
$(document).ready(function() {
$(".divs div:not(:first)").hide() //hide all divs not first
$("#next").click(function() {
if ($(".divs div:visible").next().length != 0)
$(".divs div:visible").next().show().prev().hide();
else {
$(".divs div:visible").hide();
$(".divs div:first").show();
}
return false;
})
.click(function(e) {
e.preventDefault();
//check if prev length is > 0 (show prev div value : else show current div value)
var questionPaperDetailsIdjsp = $(".divs div:visible").prev('div').length > 0 ? $(".divs div:visible").prev('div').find("[name=questionPaperDetailsId]").val() : $(".divs div:last").find("[name=questionPaperDetailsId]").val()
console.log("value =" + questionPaperDetailsIdjsp);
});
$("#prev").click(function() {
if ($(".divs div:visible").prev().length != 0)
$(".divs div:visible").prev().show().next().hide();
else {
$(".divs div:visible").hide();
$(".divs div:last").show();
}
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divs">
<div class="div1 div2"> <br> Soemthing
<br> Options :
<input type="hidden" name="questionPaperDetailsId" value="1">
<input type="hidden" id="tag1" value="1" />
<input type="hidden" name="NextQuestionId" value="2">
</div>
<div class="div1 div2"> <br> Soemthing2
<br> Options :
<input type="hidden" name="questionPaperDetailsId" value="2">
<input type="hidden" id="tag2" value="2" />
<input type="hidden" name="NextQuestionId" value="3">
</div>
<div class="div1 div2"> <br> Soemthing3
<br> Options :
<input type="hidden" name="questionPaperDetailsId" value="3">
<input type="hidden" id="tag3" value="3" />
<input type="hidden" name="NextQuestionId" value="4">
</div>
</div>
<a id="next" class="btn btn-success">Next</a>
<a id="prev" class="btn btn-warning">Prev</a>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句