如何使用 js 切换 html 元素可见性
[英]How can i toggle html element visibility with js
问题描述
I have a map (made of svg elements) which looks like the following at startup.
我有一张地图（由 svg 元素组成），在启动时如下所示。
When a user clicks a 'zone' i would like for two things to happen.当用户单击“区域”时，我希望发生两件事。 Only one zone can be clicked at at time.一次只能点击一个区域。
- The zone receives an 'active' class tag so the style changes to represent a selected state.该区域接收一个“活动”类标签，因此样式会更改以表示选定状态。
- The markers for that zone become visible.该区域的标记变得可见。
Then a user can click a 'marker' in that zone which gets the following 'active' tag applied so it appears selected to the user as well.然后，用户可以单击该区域中的“标记”，该标记会应用以下“活动”标签，因此用户也可以看到它被选中。 Only one marker can be selected at a time as well.一次只能选择一个标记。
<!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 已采纳
Creating the answer to this was fun, I've never worked with SVG's.创建这个问题的答案很有趣，我从未使用过 SVG。
jQuery cannot apply .addClass() to path elements, so in my original answer nothing was working - I was clicking but there were no style changes. jQuery 无法将.addClass()应用于路径元素，因此在我的原始答案中没有任何效果 - 我正在单击但没有样式更改。 The solution to this was using .attr() , which is why you see that in the answer.解决方案是使用.attr() ，这就是您在答案中看到的原因。 I added a class, .marker-visible so that I can 1) distinguish which markers are shown and 2) actually show the markers.我添加了一个类.marker-visible以便我可以 1) 区分显示的标记和 2) 实际显示标记。 Every zone and marker has a data-zone attribute that tells the javascript which zone is being clicked and which markers are part of that zone.每个区域和标记都有一个data-zone属性，它告诉 javascript 正在单击哪个区域以及哪些标记是该区域的一部分。
I created a click handler for the zones in document.ready() , and all that click handler does is reset the class on all zones (so they appear unclicked) and adds the zone-active class to the clicked zone.我为document.ready()的区域创建了一个点击处理程序，点击处理程序所做的只是重置所有区域上的类（因此它们看起来没有点击）并将zone-active类添加到点击区域。 Then it shows all the markers in the zone by finding all markers that have the same data-zone tag.然后它通过查找具有相同data-zone标记的所有标记来显示该区域中的所有标记。
I used $(document).on('click', '.marker-visible') rather than $('.marker-visible').click() because the markers get the marker-visible class assigned on the fly , so I can't assign the click handler on the fly as well (I could but that wouldn't be the best).我使用了$(document).on('click', '.marker-visible')而不是$('.marker-visible').click()因为标记获得了即时分配的marker-visible类，所以我也不能即时分配点击处理程序（我可以，但这不是最好的）。 Instead, I assigned it to the document so it always runs and I don't need to assign and drop click handlers during runtime.相反，我将它分配给文档，以便它始终运行，并且我不需要在运行时分配和删除单击处理程序。 The click handler does practically the same thing as the zone click handler, in that it just resets the classes of all the other visible markers and gives the clicked marker the marker-active class.点击处理程序实际上与区域点击处理程序做同样的事情，因为它只是重置所有其他可见标记的类，并为点击的标记提供marker-active类。
Comment if you need any further clarification.如果您需要任何进一步的说明，请发表评论。
$(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 have a Toggle function to solve your problem: JQuery 有一个 Toggle 功能来解决您的问题：
.toggle()
I hope it's helps ;)我希望它有帮助;)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.