开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

根据JSON数据id隐藏或显示div

是一个前端开发中常见的需求，可以通过以下步骤来实现：

首先，需要获取JSON数据并解析。可以使用JavaScript的JSON.parse()方法将JSON字符串转换为JavaScript对象，或者直接使用已经解析好的JSON对象。
接下来，根据JSON数据中的id值来判断是否隐藏或显示div。可以使用JavaScript的条件语句（如if语句）来判断id的值，并根据需要设置div的显示或隐藏属性。
在设置div的显示或隐藏属性时，可以使用JavaScript的DOM操作方法来获取div元素，并使用style.display属性来控制其显示或隐藏。例如，设置element.style.display = 'none'可以隐藏div，设置element.style.display = 'block'可以显示div。

以下是一个示例代码，演示如何根据JSON数据id隐藏或显示div：

<!DOCTYPE html>
<html>
<head>
  <title>根据JSON数据id隐藏或显示div</title>
</head>
<body>
  <div id="div1">这是div1</div>
  <div id="div2">这是div2</div>

  <script>
    // 假设有以下JSON数据
    var jsonData = [
      { "id": 1, "visible": true },
      { "id": 2, "visible": false }
    ];

    // 解析JSON数据
    // 如果已经是JavaScript对象，则不需要解析
    var parsedData = JSON.parse(jsonData);

    // 遍历JSON数据
    parsedData.forEach(function(item) {
      var divId = "div" + item.id;
      var div = document.getElementById(divId);

      // 根据visible属性设置div的显示或隐藏
      if (item.visible) {
        div.style.display = 'block'; // 显示div
      } else {
        div.style.display = 'none'; // 隐藏div
      }
    });
  </script>
</body>
</html>

在这个示例中，我们假设有两个div元素，分别有id为"div1"和"div2"。根据JSON数据中的visible属性，如果为true，则显示对应的div，如果为false，则隐藏对应的div。

对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，我无法提供相关链接。但是，腾讯云提供了丰富的云计算服务，包括云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品来支持开发和部署。

相关搜索:Angular 8-根据id显示/隐藏动态创建的<div>？HTML根据id显示隐藏<tr> (增量)js id 显示隐藏div js id显示隐藏div React js -显示或隐藏div 使用id/class滚动div隐藏/显示如何使用javascript或php根据日期隐藏/显示div？如何根据php条件显示和隐藏div 如何根据数据多少隐藏或显示div下方的按钮根据checkBox状态隐藏或显示div

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

vue+element 返回数组或json数据自定义某列显示的处理--两种方法

本文是作者开发一个业务需求时，将返回数据列表的其中一个数据长度很长的字段处理成数组，并将其作为子表显示的过程，具体样式如下（数据做了马赛克处理）返回的过长字段数据处理（用分号分隔的一个长字段）：this.list...= this.currentRow.failMessage.split(';')法一：利用插槽获取值法二：利用js数组map方法 “自己封装prop”// 数据处理this.list.map((item...以上就是vue+element 返回数组或json数据自定义某列显示的处理--两种方法的介绍，做此记录，如有帮助，欢迎点赞关注收藏！

2722 0

python测试开发django-126.bootstrap-table表格内操作按钮(修改删除) 功能实现

根据索引从bootstrapTable(‘getData’)中得到对应行的数据。...值，可以在模态框写一个隐藏的input标签，把id值写进去，后面掉确定删除按钮的时候，就可以直接发请求传到服务端 {# //删除按钮模态框#} 确定要删除选中的数据？...的值给到隐藏输入框 $('#del_ids').val(JSON.stringify(ids)); //调出删除模态框 $("#delModal").modal...",//设置请求参数类型为json字符串 dataType: "json", //预期服务器返回的数据类型 data: JSON.stringify({ids: del_ids

1.8K4 0

基于Metronic的Bootstrap开发框架经验总结（6）--对话框及提示框的处理和优化

在各种Web开发过程中，对话框和提示框的处理是很常见的一种界面处理技术，用得好，可以给用户很好的页面体验，Bootstrap开发也一样，我们往往在页面新增、编辑、查看详细等界面使用弹出对话框层的方式进行显示数据...modal-lg"> 以及我们可以根据界面元素的布局，来决定采用哪个尺寸的对话框层定义，不过他们这几个对话框的调用方式是一致的...Bootbox.js是一个小的JavaScript库，它帮助您在使用bootstrap框架的时候快速的创建一个对话框，也可以帮您创建，管理或删除任何所需的DOM元素或js事件处理程序。...：毫秒 LongTrip : 15, // 当提示条显示和隐藏时的位移 HorizontalPosition : "right", // 水平位置:left...//显示错误或提示信息（需要引用jNotify相关文件） function showError(tips, TimeShown, autoHide) { jError( tips,

5.1K5 0

vuejs深入浅出—基础篇

}); 二、常用指令 v-x的使用 1.v-if/v-else 移除或插入DOM； 2.v-show 显示或隐藏DOM（相当与设置display:none;）； 3.v-model...双向数据绑定； 4.v-for 数据循环渲染； 5.v-text/v-html 标签内部插值 ex:等同于{{html}}，不建议使用...例如： {{ message.split('').reverse().join('') }} 这里就要使用计算属性了。...2.限制： a.limitBy（限制数组显示n个）ex:第一个参数是展示条数，第二个参数是从下标5开始，也就是显示5-...3.json过滤器，JSON.stringify()精简缩略版，把表达式转换成JSON字符串，ex:{{ data | json 4 }},缩进4个字符打印data对象。

1.3K6 0

picker-extend 移动端级联选择插件

特性原生js移动端选择控件，不依赖任何库可传入普通数组或者json数组可根据传入的参数长度，自动渲染出对应的列数，支持单项到多项选择自动识别是否级联选择成功后，提供自定义回调函数callback...，提供update函数再次渲染，可用于异步获取数据或点击交互后需要改变所选数据的场景提供重定位函数可以回显（第二次进入页面时，可以显示历史选择的位置）支持级联内容的扩展比如对于三级联动类目增加推荐字段...(image-6fbf94-1536046640642)] ③json格式-联动 ...如[0,0,1] 代表有三个轮子选中的数据是第一个轮子的第0个数据、第二个轮子的第0个数据、第三个轮子的第1个数据 data是当前选中的json数据如[{id:'1',value:'hello'}...,{id:'2',value:'world'}] 功能函数：函数名参数描述 show() 无参手动显示弹窗组件 hide() 无参手动隐藏弹窗组件 setTitle() string 设置控件的标题

4.4K1 0

怎么获取遍历出来json数据的某一条信息的详细信息

这是一个很标准的json数据，一般后端会给我们传一个类似于这样的数据过来，要求是页面上只展示remarks，别的是用户点击的时候才展示，问题这样描述应该明白了吧！...ok这个时候我们有三种解决方案：一个一个的介绍：第一个是：让后端写一个接口，数据是有唯一的ID的，这个时候我们遍历拿到的数据是有ID的，那么写一个函数将ID传递给他，他根据ID查数据库，将查询的结果返回过来...} } 页面div（自己可以做好看一些，我只是演示效果）发送接口的函数...} }); } 第二个方案是直接将所有的数据全部拿到，根据ID的不同，拿到对应的数据：之前的遍历数据是一样的，就不重复了，这里怎么拿到页面上对应的数据是下面的js function...第三种方案：将数据全部拿到，也全部取出来，将多余的部分隐藏，然后需要的时候点击显示就行了，这个就不演示也不写源码了，毕竟就是一个隐藏与显示，jQuery提供的现成的办法有好多种：分别是fadein、fadeout

1.3K4 0

layui rate (评分组件）使用的一点经验分享

背景这几天在做管理后台的功能开发时需要添加一个可以进行标签打分的模块，方便后期对接单人员的信息收集根据需求，我选取的是常用的 layui.rate 组件在嵌入页面是发现：如果直接在页面上进行显示...将整合的打分数据，转化成 json 字符串，存储于页面一个隐藏域 input 中 6. 当进行打分数据提交时，取用隐藏域中的值，作为请求参数传输（服务端处理参数） 7....class="label_rate_'+e.label_id+'">\n' + ' \n' ; }); ②....定义一个空数组记录（为进行记录标签ID及打分数据） * 2. 遍历数组 order_sign_label_arr ，渲染所需显示评分组件的元素值 * 3....最终，将整合的打分数据，转化成 json 字符串，存储于页面一个隐藏域 input 中 * $("#label_signed").val(JSON.stringify(arrSignRes));

1.5K3 0

JQuery Ztree 树插件配置与应用小结

用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮请务必与 addHoverDom 同时使用；属于高级应用，使用时请确保对 zTree 比较了解。...默认值：null 参数说明 treeIdString 对应 zTree 的 treeId，便于用户操控 treeNodeJSON 需要隐藏自定义控件的节点 JSON 数据对象 setting.check.enable...设置 zTree 的节点上是否显示 checkbox / radio 默认值: false 参数值：true / false 分别表示显示 / 不显示复选框或单选框 setting 举例：需要显示...、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array) 不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式默认值...参数说明 treeNode 需要勾选或取消勾选的JSON节点数据请务必保证此节点数据对象是 zTree 内部的数据对象 checked true 表示勾选节点； false 表示节点取消勾选

7.1K4 0

python测试开发django-124.bootstrap点删除按钮弹确认删除

前言批量删除bootstrap-table数据，需先弹出确认删除框，提醒用户是否确定删除。点确定按钮的时候需获取到table表格中选中的数据id数据。...确认删除期望实现的效果，选中一行或多行可以删掉单个或者批量删除点删除按钮后可以弹一个模态框，让用户点确定和取消按钮 ...id="delBody">确定要删除选中的数据？...-- /.modal --> 页面显示效果删除按钮事件写一个javascript绑定删除按钮事件 //删除表格数据 $("#btn_delete").click...",//设置请求参数类型为json字符串 dataType: "json", //预期服务器返回的数据类型 data: JSON.stringify({ids: ids

1.8K3 0

ECharts多图表与后台交互

id="main" style="width: 600px;height: 400px;"> <div id="main1" style="width:600px;height: 400px...如为空或不支持类型，则该系列数据不被显示，具体类型可进入ECharts官方查找API data : [] }] }); myChart1.setOption...如为空或不支持类型，则该系列数据不被显示，具体类型可进入ECharts官方查找API data : [], //配置样式 itemStyle...", //返回数据形式为json success : function(result) { //请求成功时执行该函数内容，result即为服务器返回的json对象...json=mapper.writeValueAsString(list); System.out.println(json); //将json数据返回给客户端

8912 0

php无限级分类实现评论及回复功能

经常在各大论坛或新闻板块详情页面下边看到评论功能，当然不单单是直接发表评论内容那么简单，可以对别人的评论进行回复，别人又可以对你的回复再次评论或回复，如此反复，理论上可以说是没有休止，从技术角度分析很容易想到运用无限级分类技术存储数据...二、实现思路及细节 1.数据表设计 ?...empty($_POST["comment"]))){ $cm = json_decode($_POST["comment"],true);//通过第二个参数true，将json字符串转化为键值对数组...= content; cmdata.nickname = "游客";//测试用数据 cmdata.head_pic = "/Public/images/default.jpg";//测试用数据 var...}); (2).回复评论:回复评论的a标签按钮引用了样式comment-reply，在其点击事件中进行显示或隐藏评论输入框的操作 //点击"回复"按钮显示或隐藏回复输入框 $("body").delegate

2.1K3 0

javaWeb核心技术第十三篇之Ajax

参数是username 4.编写servlet代码. 5.回调函数中处理响应数据 if(1 失败) { 用户名不可用,显示可用隐藏 }else { 用户名不可用隐藏...可用隐藏 $("#SuccessId").hide(); $("#FailedId").show(); }else{ //成功用户名不可用隐藏可用显示...="label label-danger" id="FailedId">用户名不可用 Json(重点): Json是一种数据格式,用于通信获得数据传递数据方便....将一根div显示,再往框里加数据, $(function(){ //1.给文本框绑定事件 $("#SearchId")....

1.2K5 0

python测试开发django-51.Ajax发送post请求登录案例

前言我想实现一个登录功能：登录的接口是另外一个地方提供，页面上点登录按钮的时候，先访问登录接口，根据接口返回json信息判断是否登录成功，登录成功页面跳转，登录不成功，在登录首页显示失败原因登录页...ajx 登录接口基本信息如下：登录接口地址：/login_json/ 请求方式：post 请求body...，从页面上name=”csrfmiddlewaretoken”获取value值返回数据（json格式）：成功：{‘status’: “1”, “msg”: “success!”}...失败：{‘status’: “0”, “msg”: “账号或密码不对”} 获取页面上请求参数先把数据从页面上抓取出来，定义三个变量，后面post请求好传值 $('#aj').click(function..."dataType" : "json", //指定返回的数据格式 "success" : callback, //

1.2K3 0

js控制json生成菜单——自制菜单

id="nav_box"> .../nav.json", function(data) { //1.getJSON方法获取json文件数据，data为json存储的数据对象组 for(var i = 0;...siblings().children("ul").slideUp(); //6.为一级菜单绑定点击事件 //一级菜单项可以滑动显示或隐藏子菜单项...//同时，当前菜单显示，则其他都隐藏 $("." + data[i]["navId"]).on("click", function...if(data[i][key] == i + 1) { //5.判断非一级菜单项 //根据该对象的父级菜单

3022 0

前端-vue 和微信小程序的区别、比较

onHide：页面隐藏当 navigateTo或底部tab切换时调用。 onUnload：页面卸载当 redirectTo或 navigateBack的时候调用。...message: 'Foo' }, { message: 'Bar' } ] } }) {{item}} 四、显示与隐藏元素...vue中，使用 v-if 和 v-show控制元素的显示和隐藏。...小程序中，使用 wx-if和 hidden控制元素的显示和隐藏。... new Vue({ el

1.5K3 0

vue和微信小程序的区别

详见生命周期 onHide: 页面隐藏当navigateTo或底部tab切换时调用。 onUnload: 页面卸载当redirectTo或navigateBack的时候调用。...数据请求在页面加载请求数据时，两者钩子的使用有些类似，vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据。...message: 'Foo' }, { message: 'Bar' } ] } }) {{item}} 四、显示与隐藏元素...vue中，使用v-if 和v-show控制元素的显示和隐藏小程序中，使用wx-if和hidden控制元素的显示和隐藏五、事件处理 vue：使用v-on:event绑定事件，或者使用@event绑定事件... new Vue({ el

1.3K1 0

fullcalendar日历插件的使用并实现增删改查

下面我来附上几张图片： 1、刚进去默认显示当前月份，查出数据库的数据并展示，今天是2018年1月19号，所以我给上过的课次颜色变为灰色，而没上过的课次变为橙色 ? 2、点击特定的日期，添加课次： ?...点击未上过的课次进行编辑或删除： ? 以及课次的拖动，如将1月22号的“08:00-09:00 高数一班”拖动到1月29号： ?...，多出去的数据不会将格子挤开，而是显示为 +...more ，点击后才会完整显示所有的数据 eventLimit: true, //设置是否显示周六和周日，设为false则不显示 weekends...dataType: 'json', type : 'post', success: function(result){ // 获取当前月的数据 var len = result.body.wesClassList.length...', dataType: 'json', type : 'post', success: function(result){ // 获取当前月的数据 var len = result.body.wesClassList.length

5.4K4 0

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

返回值:Booleanis(expr|obj|ele|fn)，根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。...="e01" type="text" /> <span id="divMsg...•三种预定速度之一的字符串(“slow”,”normal”,or “fast”)或表示动画时长的毫秒数值 hide([speed,[easing],[fn]])，隐藏显示的元素 toggle([speed...当显示成功后触发fn hide()隐藏 toggle(speed[,fn]) 切换,如果隐藏就显示，如果显示就隐藏。...，可以使匹配的元素以“滑动”的方式隐藏或显示  滑动：改变高度 slideDown，显示（从上往下） slideUp，隐藏（从下往上） slideToggle()切换 ——

8.2K2 0

火狐扩展开发入门实践

为浏览器添加特性与功能,和在网页里编码相比他能帮助您处理页面上的数据按照开发者的流程进行，实际上扩展是用来提升或补充网站功能；让用户展现他们的个性：浏览器扩展可以操控网页的内容；从网页中添加或删除内容...- main.js manifest.json 该文件是每个 WebExtension 里面必须存在的文件，它包含了关于这个扩展插件基本的元数据（metadata），比如它的名字、版本和所需扩展API.../style.css"> Frog <...*显示弹出窗口的错误信息，隐藏正常UI。...// # 选项卡是否在当前窗口中 // # 父窗口或窗口的id。当前窗口的WINDOW_ID_CURRENT。

2.5K1 0

JavaWeb18-jquery学习笔记（Java全栈开发）

当显示成功后触发fn hide() 隐藏 toggle(speed [,fn]) 切换,如果隐藏就显示，如果显示就隐藏。...滑动：改变高度 slideDown ，显示（从上往下） slideUp，隐藏（从下往上） slideToggle() 切换淡入淡出：改变透明度 fadeIn 显示 fadeOut 隐藏 fadeToggle...切换 fadeTo 指定对象透明度效果: 基本:宽和高都变 show([毫秒值],[fn]) 展示 hide([毫秒值],[fn]) 隐藏 toggle([毫秒值],[fn]) 切换显示效果若显示则隐藏...例如：get、post url 设置请求路径 data 请求参数 dataType 设置数据转换类型，例如：xml, html, script, json success 成功回调 fn error 错误回调...所有内容：有name，有值（非空）--文本有数据，单选多选选中，下拉列表选中等字符串：key=value&key=value&.... serializeArray()将表单中所有内容转成json数组

6.8K9 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭