个人中心
gpt4 book ai didi

javascript - 我如何使用 js 切换 html 元素可见性

转载 作者：行者123 更新时间：2023-11-28 17:02:19 27 4
gpt4 key购买 nike

我有一张 map (由 svg 元素组成)在启动时看起来像下面这样。

enter image description here

当用户点击“区域”时，我希望发生两件事。一次只能点击一个区域。

  1. 区域收到“事件”类标签，因此样式会发生变化以表示选定状态。
  2. 该区域的标记变得可见。

enter image description here

然后用户可以单击该区域中的“标记”，它会应用以下“事件”标签，因此用户也可以选择它。一次也只能选择一个标记。

enter image description here 

<!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>

最佳答案

创建这个问题的答案很有趣，我从未使用过 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>

关于javascript - 我如何使用 js 切换 html 元素可见性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52120497/

27 4 0
文章推荐： javascript - 如何使用 JavaScript 中的 this.value 从下拉列表中检查特定值
文章推荐： python - 生成条件随机矩阵
文章推荐： css - 如何找出支持哪些 `font-feature-settings` 安全网络字体(Arial、Georgia、Tahoma)/任何字体？
文章推荐： javascript - 将存储在文档属性中的数据返回到数组并推送到范围；气体
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com