首页 > 编程语言 >使用PHP和jq一起渲染页面时,可根据接口返回值改变php渲染的数据状态

使用PHP和jq一起渲染页面时,可根据接口返回值改变php渲染的数据状态

时间:2023-02-14 12:14:08浏览次数:61  
标签:obj 渲染 jq 收藏 collect php data id icon

/*收藏院校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>

 

 

 

 

标签:obj,渲染,jq,收藏,collect,php,data,id,icon
From: https://www.cnblogs.com/LindaBlog/p/17119142.html

相关文章

  • jq-表单事件(表单回车事件-只有一个input时回车事件会刷新页面)
    当form表单只有一个input框时,按下回车键,会自动提交表单解决办法:法1.去掉<form>表单标签法2.不要让表单中只有一个文本框(增加一个隐藏的文本框就行)......
  • vue原理:diff、模板编译、渲染过程等
    一、虚拟DOM:因为DOM操作非常消耗性能,在操作DOM时,会出现DOM的回流(Reflow:元素大小或者位置发生改变)与重绘(元素样式的改变)使DOM重新渲染。现在的框架Vue和React很少直接操作......
  • xampp配合compose部署一个基于php7.4的项目
    下载xampphttps://www.apachefriends.org/打开软件启动报错检查网络情况先执行一下这个那就好说,搜一下https://www.microsoft.com/en-us/download/detai......
  • JQuery对象和JS对象的区别与转换
    JQuery对象和JS对象区别与转换1JQuery对象在操作时更加方便2JQuery对象和js对象方法不通用的3两者相互转换jq转js:jq对象[索引]或jq对象,get......
  • jQuery1.0.3<3.5.0xss漏洞
    起因: 升级方法:1.找到jQuery文件,我的路径为:/src/main/webapp/plugin/jquery/js/jquery.min.js2.下载需要升级的jQuery文件到指定目录,建议与升级前的jQuery文件同目录。下......
  • echarts 从后端获取数据,动态渲染图表
    echarts从后端获取数据,动态渲染图表简介echarts的数据是在初始化后setOption中直接填入的,但是很多时候可能数据需要异步加载后再填入。ECharts中实现异步数据的更新非......
  • php 常用数组方法
    array_shift() 函数用于删除数组中的第一个元素,并返回被删除的元素。array_pop()函数删除数组中的最后一个元素。array_unique()函数用于移除数组中重复的值。如果两......
  • vue原理:diff、模板编译、渲染过程等
    一、虚拟DOM:因为DOM操作非常消耗性能,在操作DOM时,会出现DOM的回流(Reflow:元素大小或者位置发生改变)与重绘(元素样式的改变)使DOM重新渲染。现在的框架Vue和React很少直接操作......
  • PHP学习——【才贯二酉】
    前言上一篇文章​​PHP学习——【一往无前】​​​中学习了PHP的基本语法,这篇文章先做一个小案例巩固一下上篇文章的知识,接着学习PHP中的流程控制语句。表单传值问题在PHP......
  • JQuery概述 快速入门
    概念:一个JavaScript框架简化JS开发Jquery是一个快速简洁的JavaScript框架是续Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)Jquery设计的宗......