使用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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
2022-02-14 jquery.dataTables实现table自定义列显示隐藏
2019-02-14 easyui 布局之window和panel一起使用时,拉动window宽高时panel不跟随一起变化
2019-02-14 easyui组件window拖动时超过浏览器顶部则无法拖回