使用PHP和jq一起渲染页面时,可根据接口返回值改变php渲染的数据状态
/*收藏院校1-专业2-文章3*/
/*
* e: this,当前对象
* _id: 接口请求所需的id(收藏时传递当前列表的id,取消收藏时传递收藏后的列表id(接口会返回))
* _title: '收藏的列表标题'
* _obj:要修改状态的目标元素
*/
function changeCollectCollege(e,_id,_type,_title,_obj) {
// console.log('_id',_id);
let collect_id = $(e).data('collect-id');
// console.log('collect_id',collect_id);
let _url = globe.baseApi.user_collect_add;
let _param = {};
if(collect_id){
// 取消收藏
_url = globe.baseApi.user_collect_del;
_param = {
token: $("input[name='token']").val(),
id: collect_id
}
}else{
// 收藏院校
_param = {
token: $("input[name='token']").val(),
type:_type,
type_id: _id,
title: _title
};
}
ajaxPostToast(_param,_url,function (res) {
console.log('_obj',_obj);
if(collect_id){// 取消收藏成功
$(e).data('collect-id', 0);
$(_obj).data('collect-id',0);
$(e).find('.iconfont').addClass('icon-collect').removeClass('icon-collect-fill');
$(_obj).find('.iconfont').addClass('icon-collect').removeClass('icon-collect-fill');
}else{
// 收藏成功
$(e).data('collect-id', res.data.collect_id);
$(_obj).data('collect-id',res.data.collect_id);
$(e).find('.iconfont').addClass('icon-collect-fill').removeClass('icon-collect');
$(_obj).find('.iconfont').addClass('icon-collect-fill').removeClass('icon-collect'); // 涉及到一个页面有两个地方有收藏功能,因为是php渲染页面,不会刷新状态,所以需要手动控制修改状态。
}
});
}
html代码:
{if condition="$is_collect eq 0"} // 未收藏
<a data-collect-id="0" id="bottom_collect" onclick="changeCollectCollege(this,{:input('param.id')},1,'{$info.name}','#top_collect')" class="collect"><i class="iconfont icon-collect"></i>收藏该院校</a>
{else/}
// 已收藏
<a class="collect cancel_collect" id="bottom_collect" data-collect-id="{$user_collect_id}" onclick="changeCollectCollege(this,{$user_collect_id},1,'{$info.name}','#top_collect')"><i class="iconfont icon-collect-fill"></i>收藏该院校</a>
{/if}
<ul class="flex-start text">
<li>{$info.name|default=''}</li>
{if condition="$is_collect eq 0"}
<li class="collect" data-collect-id="0" id="top_collect" onclick="changeCollectCollege(this,{:input('param.id')},1,'{$info.name}','#bottom_collect')"><i class="iconfont {if condition="$is_collect"} icon-shoucangfill {else/} icon-collect {/if}"></i><span>收藏</span></li>
{else/}
<li class="collect cancel_collect" id="top_collect" data-collect-id="{$user_collect_id}" onclick="changeCollectCollege(this,{$user_collect_id},1,'{$info.name}','#bottom_collect')"><i class="iconfont {if condition="$is_collect"} icon-shoucangfill {else/} icon-collect {/if}"></i><span>收藏</span></li>
{/if}
</ul>
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/17119142.html