代码之家  ›  专栏  ›  技术社区  ›  JokerMartini

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

css html jquery javascript
  •  -1
  • JokerMartini  · 技术社区  · 6 年前

    我有一个映射(由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>
    2 回复  |  直到 6 年前
        1
  •  1
  •   KatoFett    6 年前

    创建这个问题的答案很有趣,我从未使用过SVG。

    .addClass() 路径元素,所以在我最初的回答中什么都不起作用-我在单击,但没有改变样式。解决方法是使用 .attr() ,这就是为什么你会在答案中看到这一点。我加了一节课, .marker-visible 这样我就可以1)区分显示了哪些标记2)实际显示了标记。每个区域和标记都有一个 data-zone 属性,该属性告诉javascript正在单击哪个区域以及哪些标记是该区域的一部分。

    document.ready() zone-active 类到单击的区域。然后通过找到所有具有相同属性的标记来显示区域中的所有标记 数据区

    我曾经 $(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
  •   JoelDoryoku    6 年前

    JQuery有一个切换函数 要解决您的问题: 

    .toggle()

    推荐文章
    Softly  ·  单选按钮未按预期取值
    1 年前
    NovoMannen  ·  导航中的下拉菜单在内容后面重叠
    1 年前
    Thirumal isireddy  ·  在导航栏顺风css中,img被扭曲,而不是将元素推到旁边
    1 年前
    eXor420  ·  如何在脚本标记中使用导出的函数?
    1 年前
    Hadi  ·  如何在无效和有效输入中选择用于更改样式的psoudo元素(after)
    1 年前
    IonicMan  ·  剑道网格在宽度过大时不显示某些列
    1 年前
    Kernier  ·  如何将数学公式支持添加到StacksEditor?
    1 年前
    Md. Ibrahim  ·  CSS网格项溢出小屏幕滚动
    1 年前
    Arjun V Srivatsa  ·  如何将系统时区信息分配给javascript中的变量?
    1 年前
    Akshay mek  ·  Vscode扩展建议不适用于某些文件夹
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号