Question

我有一张地图（由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>

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

Answer 2

jQuery具有Toggle功能以解决您的问题：

.toggle()

希望对您有所帮助；）

如何使用JS切换HTML元素可见性

2 个答案: