作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我认为这是一个时间问题......
我有选项卡更改,每次选项卡更改时都会重新加载新项目列表(通过 get_list 函数)。
“get_list”函数加载项目列表。在项目中,有一些 class='details'。这些详细信息可以隐藏或显示,具体取决于复选框是否选中。列表项会加载,但详细信息不受复选框状态的影响。我怀疑是因为加载的时机发生在执行fadeIn/fadeOut之后。
如果是这样,如何才能使其发挥作用 - 在执行淡入淡出之前是否可以合并延迟?或者有代码在执行淡入淡出之前检查列表是否已加载?
console.log 验证项目的更改和状态是否正确。当我手动单击复选框时,淡入/淡出(在另一个脚本中)起作用。
代码如下:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
tab = e.target.id // newly activated tab
get_list(my_feedback,user_id,status,tab,feedback_limit,feedback_start);
console.log(tab);
if($('#hide_details').is(":checked")){//show various details
console.log('is checked');
$('.details').fadeIn();
$('.link-no-blue').addClass('no-link').removeClass('link-no-blue');
}else{//hide various details
console.log('is NOT checked');
$('.details').fadeOut();
$('.no-link').addClass('link-no-blue').removeClass('no-link');
}
});
典型的 HTML:
<p class="details" style="margin:0px;"><strong>hotmail</strong><font color="#adb2ba"> March 9, 2020 User: 30</font>
<span> <font color="#adb2ba">ID:124/features</font></span>
<span style="float:right;"><span class="link edit_link" data-id="124">Edit</span> <span><strong>Status: </strong>New</span>
</span></p>
get_list 函数:
function get_list( my_feedback,user_id,status,tab, feedback_limit, feedback_start ){
$.ajax({
url:"/modules/feedback/feedback_ajax_list.php",
method:"POST",
data:{action:'get_list',
my_feedback:my_feedback,
user_id:user_id,
status:status,
tab:tab,
feedback_limit:feedback_limit,
feedback_start:feedback_start
},
success:function(data){
//console.log(data);
$("#data").append(data).hide().fadeIn(500);
}
});
}
最佳答案
通过将复选框显示/隐藏放置在 get_list 函数的 Ajax 部分来解决。使用显示/隐藏来代替,因为我已经在列表结果中淡出:
function get_list( my_feedback,user_id,status,tab, feedback_limit, feedback_start ){
$.ajax({
url:"/modules/feedback/feedback_ajax_list.php",
method:"POST",
data:{action:'get_list',
my_feedback:my_feedback,
user_id:user_id,
status:status,
tab:tab,
feedback_limit:feedback_limit,
feedback_start:feedback_start
},
success:function(data){
//console.log(data);
$("#data").append(data).hide().fadeIn(500);
//show or hide details depending on the checkbox
if($('#hide_details').is(":checked")){//show various details
console.log('is checked');
$('.details').show();
$('.link-no-blue').addClass('no-link').removeClass('link-no-blue');
}else{//hide various details
console.log('is NOT checked');
$('.details').hide();
$('.no-link').addClass('link-no-blue').removeClass('no-link');
}
}
});
}
不需要更改或添加 Async: false 到 ajax,似乎按原样工作得很好
关于javascript - 如何使用 Ajax 淡入/淡出函数的计时问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60662130/
我是一名优秀的程序员,十分优秀!