我正在开发一个响应式测验应用程序,我在页面加载时加载所有问题,但一次显示一个问题。用户界面看起来像这样:
在移动视图中,所有问题都以长卷轴方式显示。
用户单击按钮后,这些问题将加载到同一页面上。我正在使用ng-if
和ng-click
(AngularJS
)
由于页面加载时内容不存在,我使用了jquery .on()
函数进行上一次和下一次按钮点击。
为了加载问题并显示它们,我编写了一个jquery
函数initialize()
,它根据窗口大小显示问题。我已经在btn click和window resize上调用了该函数。
功能代码是:
function initialize() {
alert('called')
current = 1;
if ($(window).width() > 768) {
var i = 2;
var next = $("#"+i).length;
//hide all except first question
$("#1").show(); //shows first ques
$("#previous").children('img').addClass('disabled');
$("#next").children('img').removeClass('disabled');
while(next>0){ //hides all ques except first
$("#"+i).hide();
i++;
next = $("#"+i).length;
}
}
else{
//alert('mobile');
var i = 1;
var next = $("#"+i).length;
//show all questions (long scroll)
while(next>0){
$("#"+i).show();
i++;
next = $("#"+i).length;
}
}
我已经设置alert()
来检查函数何时被调用。
我得到alert()
,但.hide()
似乎不起作用,因为所有问题都在显示。
但是,当我调整窗口大小时,当函数被调用时,一切都按预期工作(一次一个问题),.hide()
也在工作。
我不确定是什么问题。我从2天开始坚持这个。