首页 \ 问答 \ 使用动态分配的类显示/隐藏div(show/hide div with dyamically assigned class)

使用动态分配的类显示/隐藏div(show/hide div with dyamically assigned class)

我基于api回调数据动态分配div id。 例如,我有一堆数据返回,附加到div,我可以为div id分配唯一的IP地址。 我可以完全控制我可以指定的内容,即DIV id或class或者其他..

我附上了一个输出结果的例子,希望它能澄清我在寻找什么。

在此处输入图像描述

我希望能够实现的是当点击端点链接时,它将显示相应的div并隐藏所有其他DIV数据框。端点链接可以点击,我可以添加onclick脚本给他们或任何需要的东西DONE

无论我们使用div id还是类名,我都不会讨厌。


I am dynamically assigning the div id based on the api call back data. For example I have a bunch of data returned which is appended to a div and I can assign the div id with a unique ip address. I have full control over what I can assign i.e. DIV id or class or whatever..

I have attached an example of what the output looks like and hopefully it will clarify what i am looking for.

enter image description here

What I want to be able to achieve is when an endpoint link is clicked, it will show the respective div and hide all other DIV data boxes.. The endpoint links can made clickable and i can add onclick scripts to them or whatever needs to be done

Whether we use the div id or class name i am not fussed.


原文:https://stackoverflow.com/questions/29585591
更新时间:2021-10-25 17:10

最满意答案

这应该工作得很好。

在我使用EndPoint的演示中为您的div分配一个类。 onclick函数将使用该类来查找div元素并将其隐藏。 然后它将使用this用于触发函数的元素,将该元素中的div作为目标并显示它。

$('.EndPoint').on('click', function () {
    $('.EndPoint').find('div').hide();
    $(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EndPoint">
  <a href="#">End Point [0]</a>
    <div><b>IP Address:</b> 216.12.145.20</div>
</div>
<div class="EndPoint">
  <a href="#">End Point [1]</a>
    <div><b>IP Address:</b> 172.230.105.123</div>
</div>
<div class="EndPoint">
  <a href="#">End Point [2]</a>
    <div><b>IP Address:</b> 206.204.52.31</div>
</div>

如果您不明白,请在下面留言,我会尽快给您回复。


编辑 - jQuery附加onclick

var IPs=["216.12.145.20","172.230.105.123","206.204.52.31"];
//Foreach value in array
$.each(IPs, function(i,v) {
//Append to id:container
$('#container').append('<div class="EndPoint"><a href="#">End Point ['+i+']</a><div><b>IP Address:</b> '+v+'</div></div>');
});
$('.EndPoint').on('click', function () {
    $('.EndPoint').find('div').hide();
    $(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

我希望这有帮助。 快乐的编码!


This should work just fine.

Assign your div with a class, in the demo i'm using EndPoint. The onclick function will use the class to find the div element and hide it. Then it will use this the element used to trigger the function, target the div within that element and show it.

$('.EndPoint').on('click', function () {
    $('.EndPoint').find('div').hide();
    $(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EndPoint">
  <a href="#">End Point [0]</a>
    <div><b>IP Address:</b> 216.12.145.20</div>
</div>
<div class="EndPoint">
  <a href="#">End Point [1]</a>
    <div><b>IP Address:</b> 172.230.105.123</div>
</div>
<div class="EndPoint">
  <a href="#">End Point [2]</a>
    <div><b>IP Address:</b> 206.204.52.31</div>
</div>

If you don't understand anything please leave a comment below and I will get back to you as soon as possible.


Edit - jQuery Append with onclick

var IPs=["216.12.145.20","172.230.105.123","206.204.52.31"];
//Foreach value in array
$.each(IPs, function(i,v) {
//Append to id:container
$('#container').append('<div class="EndPoint"><a href="#">End Point ['+i+']</a><div><b>IP Address:</b> '+v+'</div></div>');
});
$('.EndPoint').on('click', function () {
    $('.EndPoint').find('div').hide();
    $(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

I hope this helps. Happy coding!

相关问答

更多

相关文章

更多

最新问答

更多
  • 如何从rails插件加载javascript文件(How to load javascript file from rails plugin)
  • 我正在研究有向图的DFS,如何到达没有任何边缘指向的节点?(I'm working on a DFS of a directed graph, How do I get to a node without any edges pointed at it?)
  • 无法在swift中展开可选项(can't unwrap optional in swift)
  • 如何从熊猫中提取列表?(How to extract a list from pandas?)
  • 计算不同列中2个值的出现次数(Count number of occurrences of 2 values in different columns)
  • Stack ExtJS 6 + Spring Boot(Stack ExtJS 6 + Spring Boot)
  • 如何安装ioreg?(How to install ioreg?)
  • Chrome Packaged app webview中的重音字符未显示(Accented characters in Chrome Packaged app webview not showing up)
  • C ++ recvfrom超时(C++ recvfrom timeout)
  • 如何使用实体框架(.edmx模型)和Razor视图为MVC4或MVC 5创建部分视图?(How can i create a Partial View for MVC4 or MVC 5 using Entity Framework (.edmx Model) with Razor Views?)
  • 子类QStyledItemDelegate忽略样式表(Subclassed QStyledItemDelegate ignores Stylesheet)
  • 有没有办法以编程方式配置ios应用程序的通知显示设置?(Is there a way to programmatically configure the notification display setting for an ios app?)
  • boost asio serial_port_service和serial_port有什么区别(What is the difference of boost asio serial_port_service and serial_port)
  • 如何通过解析nginx日志文件自动拒绝IP地址(How to deny ip address automatically by parsing nginx log file)
  • 如何在C#中为ASCII 127定义字符或字符串常量?(How might I define a character or string constant in C# for ASCII 127?)
  • 如何获得R中两个集合的差异?(How to get the differences of two set in R?)
  • 如何通过IMG-Activity找到定制路径(How to find the Customizing Path via IMG-Activity)
  • 可以用python窗口打开.py文件么
  • 指针的增量是否与整数的增量相同?(Does increment in pointer not same as that of integer? [closed])
  • 我无法删除使用Delphi7处于关系中的数据库的2个表中的所有数据(I can't delete all the data within 2 tables of a database which is in a relationship using Delphi7)
  • 使用反射向ArrayList添加未知类的对象(Add an object of unknown class to ArrayList with reflection)
  • 我想学JAVA 推荐下怎么 学
  • 什么是ASP.NET Identity的IUserSecurityStampStore 接口?(What is ASP.NET Identity's IUserSecurityStampStore interface?)
  • jquery如何获取多个同id的div,然后修改css属性左边间距left的值
  • jquery ui resizable:调整旋转对象的大小(jquery ui resizable: resizing the rotated objects)
  • 如何用sublime text编写微信小程序代码
  • Hibernate:在一个数据库表行中存储一个固定长度的数组(Hibernate: Storing an fixed length array in one database table row)
  • shared_ptr用于原始指针参数(shared_ptr for a raw pointer argument)
  • 将本地git分支与远程分支进行比较?(How to compare a local git branch with its remote branch?)
  • 如何在DOM中查找字符串并通过php或jQuery更改它们(how to find strings in DOM and change them by php or jQuery)