使用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
 
                    
                     
                    
                 
                    
                 
                
            
         
         浙公网安备 33010602011771号
浙公网安备 33010602011771号