分享程序员开发的那些事...
更新时间：2023-12-05 16:45:28
可以尝试下面的代码
< script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>< body id ="banner">< ul id ="eventCal"></ul>< button id ="clicks"> Click</button>< script type ="text/javascript">jQuery(document).ready(function($){var quizzes = [{title:'title1'，choices:[{title:'choice1'}，{title:'choice2'}]}}，{title:'title2'，choices:[{title:'new1'}，{title:'new2'}]}，{title:'title3'，choices:[{title:'demo1'}，{title:'demo2'}]}]]；var index = 0;console.log(quizzes.length)$(#clicks").click(function(){if(typeof quizzes [index]！='undefined'){var html ='< li&s; span>'+ quizzes [index] .title +'</span</li>';if(quizzes [index] .choices.length> 0){html + ='< li class ="choises">';;quizzes [index] .choices.forEach((element，index，array)=> {//console.log(element.title);html + ='< ul>';;html + ='< li>< span>'+ element.title +'</span></li>';html + ='</ul>';});html + ='</li>';;}$(#eventCal").html(html);索引++;}if(quizzes.length ===索引)$(#clicks").html(完成");})});</script></body>
I have array of data returning by Ajax and I want to show them one by one in panel, currently they are all in one panel at the same time, I wish to have multiple step of this data.
HTML
<div class="panel-body">
<div class="answerPanel"></div>
</div>
Script
$.ajax({
type:'GET',
url:'{{url('dashboard/getQuizzes')}}/'+projectId,
beforeSend: function(data) {
console.log("click - ajax before send", data);
},
success:function(data){
$(data.quizzes).each(function(_, i){
$('.answerPanel').append(i.question);
});
}
});
this $('.answerPanel').append(i.question); is returning all data together in my view, I also tried this answer the only difference was it had brake line with it :)
My question is how can I make multi step panel with this data?
What I'm looking for is having
how are you?fg(based on my screenshot) in first page then I click next button and getuidand so on...
I'm aware this question might seem silly but please try to help before giving down vote :)
Can you try the below code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="banner">
<ul id="eventCal">
</ul>
<button id="clicks">Click</button>
<script type="text/javascript">
jQuery(document).ready(function($){
var quizzes = [{title:'title1',choices:[{title:'choice1'},{title:'choice2'}]},
{title:'title2',choices:[{title:'new1'},{title:'new2'}]},
{title:'title3',choices:[{title:'demo1'},{title:'demo2'}]}];
var index = 0;
console.log(quizzes.length)
$("#clicks").click(function(){
if(typeof quizzes[index] != 'undefined'){
var html = '<li><span>'+quizzes[index].title+'</span></li>';
if(quizzes[index].choices.length > 0){
html+='<li class="choises">';
quizzes[index].choices.forEach((element, index, array) => {
//console.log(element.title);
html+='<ul>';
html+='<li><span>'+element.title+'</span></li>';
html+='</ul>';
});
html+='</li>';
}
$("#eventCal").html(html);
index++;
}
if(quizzes.length === index)
$("#clicks").html("Finish");
})
});
</script>
</body>