开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

根据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。

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

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

有帮助

没帮助

相关·内容

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

我今天遇到遇到一个很恶心的问题，场景是这样的，就是说，如果您用ajax取到后端的数据，遍历了出来，这个时候是一条条的展示出来的，但是展示只是json数据里面的某一个信息，例如是姓名啊，这个时候需要的是用户点击某一个姓名的时候将这个人的所有信息拿到，不知道我描述的是不是可以让您理解，举个例子：

04

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

picker-extend.js

01

AdminLTE介绍和zTree的简单使用

AdminLTE是一个开源的后台控制面板和仪表盘 WebApp 模板，是建立在Bootstrap3框架和JQuery之上的开源模板主题工具，它提供了一系列响应的组件，并内置了多个模板页面，包括仪表盘、邮箱、日历、锁屏、登录及注册、404错误、500错误等页面。通过AdminLTE，我们可以快速的创建一个响应式的Html5网站。

06

layui的文件上传跟文件保存

{tabs-pane label="layui前段写法"} 选取的文件进行预加载并展示，根据表单提交后进行数据文件保存操作，图片文件存在当前项目的目录下

01

Echarts饼状图交互数据

前面写到一个关于Echarts饼状图交互数据的例子，但是当时name是写死的，现在的value和name都是需要从后端获取，然后渲染在界面，大致的json数据是这样的：模拟一个json格式的数据：

02

day60_BOS项目_12

1、项目复习 1.1、项目第一天 1、项目概述 2、搭建开发环境（数据库、web项目、svn） 3、jQuery EasyUI 详解如下： 1、layout 页面布局 2、accordion 折叠面板

02

AJAX应用【股票案例、验证码校验】

股票案例我们要做的是股票的案例，它能够无刷新地更新股票的数据。当鼠标移动到具体的股票中，它会显示具体的信息。我们首先来看一下要做出来的效果：服务器端分析首先，从效果图我们可以看见很多股票基本信

(修订版)AJAX应用！

我们要做的是股票的案例，它能够无刷新地更新股票的数据。当鼠标移动到具体的股票中，它会显示具体的信息。

02

Web-第十五天 Ajax学习【悟空教程】

在实际开发中，完成注册功能前，如果用户填写用户信息，准备填写其他信息时，将提示当前用户的用户名是否可用。效果图如下：

03

bootstrap-suggest插件处理复杂对象时的解决方案

在用bootstrap-suggest插件的时候，如果要提示的属性中有关联对象的话，前端页面显示不出来(下面的areaId属性加载不出来) wellInfo类关键属性:

03

七个帮助你处理Web页面层布局的jQuery插件

1.UI.Layout jQuery UI布局插件官方网站：http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局。布局

02

JSON格式转换工具：快速、简单、高效处理JSON数据

在当今的软件开发中，经常会涉及处理和操作JSON格式的数据。JSON（JavaScript Object Notation）已经成为一种流行的数据交换格式，广泛应用于Web开发、API调用和数据存储等领域。然而，手动处理JSON数据可能会变得复杂和繁琐。为了简化这一过程，我们向您介绍一款强大又易于使用的工具——JSON格式转换工具。

05

vue+axios+echarts实现一个折线图

前端可视化是一个前端最基本的技能，要想做的好看，还是得借助一下百度家的echarts，那要怎么在Vue中使用echarts？这个官网没有给出实例，实例基本都是在jquery里面使用，引入的例子。

01

vue+axios+echarts实现一个折线图

前端可视化是一个前端最基本的技能，要想做的好看，还是得借助一下百度家的echarts，那要怎么在Vue中使用echarts？这个官网没有给出实例，实例基本都是在jquery里面使用，引入的例子。

01

Echarts5.3.2可视化案例-交互篇

https://echarts.apache.org/zh/tutorial.html 1.下载echarts.js到本地 2.然后在html文件中通过如下引入

02

vue2.0 + element-ui 实战项目-axios请求数据（三）

3:准备json数据自己写了一个json数据，放在服务器上，现在要通过vue项目调用数据 http://47.xxx.xx.78:8091/ConfigServer/picture.action

01

【Java框架型项目从入门到装逼】第十一节用户新增之把数据传递到后台

让我们继续来做“主线任务”，这一节，我们来做具体的用户新增功能。首先，为了简单起见，我把主页面改了一些，改的是列表那一块。删去了一些字段，和数据库表对应一致：现在，我们要实现一个效果，就是当我点击新

05

ChatGPT炒股：爬取股票官方微信公众号的新闻资讯

上市公司的微信公众号，现在已经成为官网之外最重要的官方信息发布渠道。有些不会在股票公告中发布的消息，也会在微信公众号进行发布。所以，跟踪持仓股票的公众号信息，非常重要。

01

js 自动补全

js 代码 //---------------------------------------------------自动补全begin-------------------------------- var maxcount = 0;// 表示他最大的值 var thisCount =0;// 初始化他框的位置 var flagThis = 0; var flag = 0; //标示是否选择自动补全 //自动补全方法 function zdbq(obj){ var id = obj; document.g

04

day51_BOS项目_03

将上面的js文件引入所需要的jsp页面中，本例以index.jsp为例 /bos19/WebContent/WEB-INF/pages/common/index.jsp

01

树形图拖拽插件tree-drag | 开源项目推荐

好多天前，领导让我实现一个树形图拖拽插件，这个插件用来描述各部门领导与员工之间的关系，每个父节点显示其子结点数量，拖拽任意一个叶结点上的人到另一个结点，他们之间的关系发生改变，树形图重新渲染。用户操作都完成后，点击保存根据树形图生成JSON，将JSON发送给后端，后端根据JSON修改数据库中的人员对应关系。

02

JSON介绍及Android最全面解析方法(Gson、AS自带org.son、Jackson解析)

JavaScript Object Notation，JavaScript的对象表示法，是一种轻量级的文本数据交换格式。

04

ECharts多图表与后台交互

ECharts多图表与后台交互多图表交互目前暂时的想法是多绑定一个DOM 1、效果： 2、test2.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/echarts.min.js"></script> <script src="js/jquery-3.4.1.mi

02

day49_BOS项目_01

其余步骤参考如下链接： https://www.cnblogs.com/chenmingjun/p/9513143.html#_label0 右键项目 --> Team --> Share Project…

02

[Electron]仿写一个课堂随机点名小项目

自从前几个月下了抖音，无聊闲暇时就打会打开抖音，因为打开它有种莫名其妙打开了全世界的感觉...

04

ajax请求解析json数据渲染在前端界面

记录一个简单的demo,关于ajax请求解析json数据渲染在前端界面的~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> </head> <bo

03

PHP使用反向Ajax技术实现在线客服系统详解

本文实例讲述了PHP使用反向Ajax技术实现在线客服系统。分享给大家供大家参考，具体如下：

04

浅谈JavaScript

jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery极大地简化了JavaScript编程。

03

一起来做一个json格式化工具吧

说到json格式化你肯定很熟悉，毕竟压缩后的json数据基本不可读，为了方便查看，我们可以在编辑器中可以通过插件一键格式化，也可以通过一些在线工具来美化，当然，有时在开发中也会遇到json格式化的需求，有很多开源库或组件能我们解决这个问题，不过并不妨碍我们自己实现一个。

01

基于layui的表单设计后台采用net core

首先一个完整的过程用户在最终界面输入要填写的信息这里的信息有很多了，有只能选择、有只能是数字、有是选择等等，这里我把layui表单里的弄的差不多了，不过还有些需要优化有兴趣的可看看layui 的form模块。我们希望生成的html可以自适应手机端和pc端，这里用到layui 的栅格。

02

input输入框输入数据查询

在input输入框输入数字的时候，会展示data.json里面的数据，当删掉input输入框输入数字的时候，隐藏出现的data.json数据列表。

03

基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用

在上篇《基于Metronic的Bootstrap开发框架经验总结（1）-框架总览及菜单模块的处理》介绍了Bootstrap开发框架的一些基础性概括，包括总体界面效果，以及布局、菜单等内容，本篇继续这一主题，介绍页面内容常用到的数据分页处理，以及Bootstrap插件JSTree的使用。在数据的界面显示当中，表格数据的展示以及分页是非常常见的处理操作，利用Bootstrap的样式布局，以及JQuery的Ajax数据处理，就能很好实现数据的动态展示和分页处理。 1、列表展示和分页处理 1）数据的列表展示在很多

05

【前端基础】javascript笔记

浏览器在加载显示一个网页时，会对页面html代码解析，并在内存中创建一个描述该页面的模型（树形结构）。

01

JQuery最全常用方法指南

ready(fn); $(document).ready()注意在body中没有onload事件，否则该函数不能执行。在每个页面中可以有很多个函数被加载执行，按照fn的顺序来执行。 bind(type, [data], fn) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。可能的事件属性有：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error one(type, [data], fn) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。

03

Python爬虫：如何自动化下载王祖贤海报？

上一讲中我给你讲了如何使用八爪鱼采集数据，对于数据采集刚刚入门的人来说，像八爪鱼这种可视化的采集是一种非常好的方式。它最大的优点就是上手速度快，当然也存在一些问题，比如运行速度慢、可控性差等。

03

前端之jquery函数库

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

02

Android webview如何加载HTML,CSS等语言的示例

这个题目可能取得不大好，想了很久没想出更合适的了。在android开发webview的时候，有的时候后台不一定给的就是一个url，而是把一些HTML，css，js语言代码给你，然后你自行组装出webview能够识别的语言，并加载到页面当中。

02

ECharts与java后台交互绘制图表

为了方便，这里就不用SSM框架的Controller查数据库了，自己造几个数据传到前台，测试效果和查数据库是一样的

01

jQuery 和 json 简单例子（注意callback函数的处理！！）（servlet返回json，jquery更新，java json）

这个例子是后台获取某个目录的所有文件信息，前台网页显示。代码文件： http://files.cnblogs.com/kenkofox/jsonTest.html%E5%92%8COnlineFileManagerServlet.rar JSON包（java文件）：http://files.cnblogs.com/kenkofox/org.json.rar Servlet： protected void processRequest(HttpServletRequest request,

03

ztree+ajax+json请求，实现加载一棵ztree树

前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是树状菜单、树状数据。

04

原荐自己写JSON编辑器

作者：汪娇娇时间：2018年1月15日下一篇：自己写代码对比工具时间过得好快，一下子就2018年了，想起好久没写博客，不觉有些浪费了时光，今天便来补一篇。 JSON是个伟大的东西，各处都用得到，既方便也纠结。用的溜的人那就没啥说的了，但也有用的不溜的或者想偷懒的人，那JSON也算是一个小小的槛吧。怎么说呢，就比如说有的人到现在连JSON的正确格式都写不对，也有人写对了但并没有自信自己是否写对，那这时候就需要一个校验工具来检验JSON格式的正确性。既然有了校验，那格式化工具怎么能少，再随着需求的增加，我

08

自己写JSON编辑器

时间过得好快，一下子就2018年了，想起好久没写博客，不觉有些浪费了时光，今天便来补一篇。

01

基于jQuery+JSON的省市联动效果

省市区联动下拉效果在WEB应用中使用非常广泛，尤其在一些会员信息系统、电商网站最为常见，开发者一般使用AJAX实现无刷新下拉联动。本文将讲述利用jQuery插件，通过读取JSON数据，实现无刷新动态下拉省市二（三）级联动效果。

01

SpringMvc+Velocity的一些配置总结

前言公司用了许久的struts2+hibernate，前两年时间SpringMvic+Shiro也有做过，大多都是基于JSP实现的界面展示层，最近一段使用使用SpringBoot+JPA采用的是thymeleaf，当然这都是工具，实现功能的一种手段而已。最近新项目，接触并尝试了一点新的东西Vue+Velocity，有没有混搭的感觉，其实也是为了以后前后端分离项目做铺垫，具体见前两篇文章。配置项目进行中，觉得还是有必要记录一下，省的被忘却。项目其他相关的不再描述，这里只引入velocity <de

07

SpringMvc+Velocity的一些配置总结

公司用了许久的struts2+hibernate，前两年时间SpringMvic+Shiro也有做过，大多都是基于JSP实现的界面展示层，最近一段使用使用SpringBoot+JPA采用的是thymeleaf，当然这都是工具，实现功能的一种手段而已。

04

ztree+json，渲染树形菜单

前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是树状菜单、树状数据。

03

制作乡镇地图数据

最近在开发关于乡镇地图相关的业务。通过本文记录开发的过程和遇到的问题。希望通过本文对有同样需求的小伙伴有所帮助。

04

ajax和axios请求本地json数据对比

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术,通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

04

vue+Element实现Tree树形数据展示

组件：https://element.eleme.cn/#/zh-CN/component/tree

04

「小滴课堂」全栈-商业级大型前端项目大课-小滴云在线教育平台

前端全栈介绍前端全栈指的是同时具备前端开发和后端开发能力的技术人员。在传统的开发团队中，前端和后端开发通常是由不同的人员分工来完成，但随着互联网技术的不断发展，越来越多的公司开始倾向于招聘同时具备前端和后端开发技能的全栈工程师。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭