如何使用 js 切换 html 元素可见性
[英]How can i toggle html element visibility with js
问题描述
我有一张地图（由 svg 元素组成），在启动时如下所示。
当用户单击“区域”时，我希望发生两件事。 一次只能点击一个区域。
- 该区域接收一个“活动”类标签，因此样式会更改以表示选定状态。
- 该区域的标记变得可见。
然后，用户可以单击该区域中的“标记”，该标记会应用以下“活动”标签，因此用户也可以看到它被选中。 一次只能选择一个标记。
<!DOCTYPE doctype html> <html lang="en"> <style type="text/css"> * { background: rgb(40,40,40); } .zone { fill: rgba(255,255,255,0.25); stroke: rgba(255,255,255,0.25); stroke-width: 1; cursor: hand; } .marker { fill: rgba(255,0,0,1.0); stroke: rgb(255,255,255); stroke-width: 0; cursor: crosshair; } .active_zone { stroke: rgba(255,255,255,1.0); fill: rgba(255,0,0,0.25); } .active_marker { stroke: rgb(255,255,255); stroke-width: 1; } </style> <body> <div class="wrapper"> <svg width="500px" viewBox="0 0 374 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <!-- Zones --> <g transform="matrix(1,0,0,1,-47,-21)"> <path class="zone" d="M90,37L47,106L91,176L159,179L176,125L220,91L180,44L90,37Z"/> </g> <g transform="matrix(1,0,0,1,-47,-21)"> <path class="zone" d="M250,21L318.436,37L333,116L285,201L159,179L176,125L220,91L180,44L250,21Z"/> </g> <g transform="matrix(1,0,0,1,-47,-21)"> <path class="zone" d="M416,56L318.436,37L333,116L285,201L421,183L409,120L416,56Z"/> </g> <!-- Markers --> <g transform="matrix(1,0,0,1,-47,-21)"> <rect class="marker active_marker" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,106,-29.5)"> <rect class="marker" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,30,-2.5)"> <rect class="marker" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,132,60.5)"> <rect class="marker" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,195,84)"> <rect class="marker" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,204,-11.5)"> <rect class="marker" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,230,33)"> <rect class="marker" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,-21,15.5)"> <rect class="marker" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,79,69.5)"> <rect class="marker" x="94" y="56" width="18" height="18"/> </g> </svg> </body> </html>
2 个解决方案
解决方案1
1 已采纳
创建这个问题的答案很有趣，我从未使用过 SVG。
jQuery 无法将.addClass()应用于路径元素，因此在我的原始答案中没有任何效果 - 我正在单击但没有样式更改。 解决方案是使用.attr() ，这就是您在答案中看到的原因。 我添加了一个类.marker-visible以便我可以 1) 区分显示的标记和 2) 实际显示标记。 每个区域和标记都有一个data-zone属性，它告诉 javascript 正在单击哪个区域以及哪些标记是该区域的一部分。
我为document.ready()的区域创建了一个点击处理程序，点击处理程序所做的只是重置所有区域上的类（因此它们看起来没有点击）并将zone-active类添加到点击区域。 然后它通过查找具有相同data-zone标记的所有标记来显示该区域中的所有标记。
我使用了$(document).on('click', '.marker-visible')而不是$('.marker-visible').click()因为标记获得了即时分配的marker-visible类，所以我也不能即时分配点击处理程序（我可以，但这不是最好的）。 相反，我将它分配给文档，以便它始终运行，并且我不需要在运行时分配和删除单击处理程序。 点击处理程序实际上与区域点击处理程序做同样的事情，因为它只是重置所有其他可见标记的类，并为点击的标记提供marker-active类。
如果您需要任何进一步的说明，请发表评论。
$(document).ready(function(){ $('.zone').click(function(){ $('.zone').attr('class', 'zone'); $('.marker').attr('class', 'marker'); $(this).attr('class', 'zone zone-active'); $('.marker[data-zone="' + $(this).data('zone') + '"]').attr('class', 'marker marker-visible'); }); $(document).on('click', '.marker-visible', function(){ $('.marker-visible').attr('class', 'marker marker-visible'); $(this).attr('class', 'marker marker-visible marker-active'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE doctype html> <html lang="en"> <style type="text/css"> * { background: rgb(40,40,40); } .zone { fill: rgba(255,255,255,0.25); stroke: rgba(255,255,255,0.25); stroke-width: 1; cursor: pointer; } .marker { fill: rgba(255,0,0,1.0); stroke: rgb(255,255,255); stroke-width: 0; cursor: crosshair; display: none; } .zone-active { stroke: rgba(255,255,255,1.0); fill: rgba(255,0,0,0.25); } .marker-visible{ display: block; } .marker-active { stroke: rgb(255,255,255); stroke-width: 1; } </style> <body> <div class="wrapper"> <svg width="500px" viewBox="0 0 374 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <!-- Zones --> <g transform="matrix(1,0,0,1,-47,-21)"> <path class="zone" data-zone="1" d="M90,37L47,106L91,176L159,179L176,125L220,91L180,44L90,37Z"/> </g> <g transform="matrix(1,0,0,1,-47,-21)"> <path class="zone" data-zone="2" d="M250,21L318.436,37L333,116L285,201L159,179L176,125L220,91L180,44L250,21Z"/> </g> <g transform="matrix(1,0,0,1,-47,-21)"> <path class="zone" data-zone="3" d="M416,56L318.436,37L333,116L285,201L421,183L409,120L416,56Z"/> </g> <!-- Markers --> <g transform="matrix(1,0,0,1,-47,-21)"> <rect class="marker" data-zone="1" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,106,-29.5)"> <rect class="marker" data-zone="2" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,30,-2.5)"> <rect class="marker" data-zone="1" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,132,60.5)"> <rect class="marker" data-zone="2" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,195,84)"> <rect class="marker" data-zone="3" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,204,-11.5)"> <rect class="marker" data-zone="3" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,230,33)"> <rect class="marker" data-zone="3" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,-21,15.5)"> <rect class="marker" data-zone="1" x="94" y="56" width="18" height="18"/> </g> <g transform="matrix(1,0,0,1,79,69.5)"> <rect class="marker" data-zone="2" x="94" y="56" width="18" height="18"/> </g> </svg> </body> </html>
解决方案2
0 2018-08-31 18:23:53
JQuery 有一个 Toggle 功能来解决您的问题：
.toggle()
我希望它有帮助;)
我该如何使用Knockoutjs切换html元素的可见性？
[英]how do i toggle the visibility of an html element using knockoutjs ?
如何使用html / css / js /在2个画布之间切换可见性？
[英]how do i toggle visibility between 2 canvas using html / css / js /?
角度-如何在一个组件中从另一个组件切换一个组件中元素的可见性？
[英]Angular - How can I toggle the visibility of an element in a component from another component?
Unobtrusive JS：在表单中使用复选框切换元素可见性
[英]Unobtrusive JS: toggle element visibility with checkbox in a form
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.