jquery - 单击交互式 map (SVG + jQuery)

Question

这是我的第一个问题，所以请温柔一点。我正在寻找创建一个交互式 SVG“ field 规划” map ，当单击该地 block 时，该 map 会在 map 旁边的一系列字段中填充有关每 block 土地的数据(地 block 编号、地 block 大小、地 block 价格等)。仅使用悬停状态，但我正在寻找一种更适合移动设备的替代方案，因此认为单击将是一个更好的选择，因此我涉足 jQuery。您可以看到the site map这里。我对 jQuery 很陌生，所以我早期的尝试很冗长，不可扩展，而且不起作用(下面的示例)。

SVG(内嵌在我的 html 文档中，仅使用 103 批中的前 2 批作为引用)

<g id="lotsPending">
  <rect x="234.2" y="21.6" class="yellowSold lot1" width="33.8" height="60"/>
  <rect x="201.6" y="21.6" class="yellowSold lot2" width="30.7" height="60"/>
</g>

...以及填充 map 旁边字段的数据:

    <div class="sitemap-specs">
      <h3>Lot No.</h3>
      <div class="lotspec revtype">
        <span class="lot1 spec m-hide">001</span>
        <span class="lot2 spec m-hide">002</span>
      </div>
      <h3>Status</h3>
      <div class="lotspec revtype">
        <span class="lot1 spec m-hide">PENDING</span>
        <span class="lot2 spec m-hide">PENDING</span>
      </div>
      <h3>Size</h3>
      <div class="lotspec revtype">
        <span class="lot1 spec m-hide">1.4ac</span>
        <span class="lot2 spec m-hide">1.6ac</span>
      </div>
      <h3>Price</h3>
      <div class="lotspec revtype">
        <span class="lot1 spec m-hide">$1,250,000</span>
        <span class="lot2 spec m-hide">$1,350,000</span>
      </div>
      <h3>Additional Info</h3>
      <div class="lotspec revtype">
        <span class="lot1 spec m-hide">Entry-way lot facing the north bound of the park.</span>
        <span class="lot2 spec m-hide">Row lot stationed near the north entrance of the park.</span>
      </div>
    </div>

jQuery

$('.lot1').click(function () {
  $('.spec').addClass("m-hide");
  setTimeout($('.lot1 spec').removeClass("m-hide"), 100);
});

我的期望是，单击带有 .lot1 类的批处理后，所有“.spec”对象都会隐藏(我的 CSS 中的 m-hide 类是显示:无)，然后是带有“.lot1”的对象。 Lot1 Spec' 类已删除 m-hide 类，从而使它们可见。经过一些研究后，我似乎找不到以类似方式构建 map 的示例，这使我相信有一种我没有掌握的更好的方法。

Answer 1

可能只是一个拼写错误，但您的选择器缺少句点:

  setTimeout($('.lot1.spec').removeClass("m-hide"), 100);

将从具有“lot1”和“spec”类的元素中删除“m-hide”类，这就是您所拥有的，而

  setTimeout($('.lot1 spec').removeClass("m-hide"), 100);

将从<spec>中删除“m-hide”类属于“lot1”类元素的子元素。

&我的 2 美分，有这么多批处理，我会考虑在点击处理程序中使用 jquery 动态填充正确数据的字段。