使用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>

 

 

 

 
posted on 2023-02-14 11:58  小虾米吖~  阅读(15)  评论(0编辑  收藏  举报