Question

这是我的第一个问题所以请保持温柔。我希望创建一个交互式SVG＆＃34;网站计划＆＃34;地图填充地图旁边的一系列字段，其中包含关于每个地块的数据，点击该地块（批号，批量，批量等）我认为只使用悬停状态，但我正在寻找更多的移动友好的替代方案，因此认为点击将是一个更好的选择，因此我进入jQuery。您可以在此处查看the site map。我对jQuery非常新手，所以我早期的尝试都很冗长，不可扩展，也没有用（下面的例子）。

SVG（在我的html文档中内联，仅使用103个批次中的前两个作为参考）

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

...以及填充地图旁边字段的数据：

    <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类的所有＆＃39; .spec＆＃39;对象会隐藏（我的CSS中的m-hide类是display：none），后跟具有＆＃39; .lot1规范的对象＆＃39;删除了m-hide类的类，允许它们可见。在做了一些研究之后，我似乎找不到以类似方式构建地图的例子，这让我相信有一种更好的方法，我没有接受。

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用正确的数据动态填充字段。

Answer 2

尝试一下

svg{
	width:50%;
	height:50%;
}
svg path{
	cursor:pointer;
}
svg path:hover {
  fill: red;
  stroke: yellow;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

</head>
<body>
<svg  version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
	<g fill="#fefee9" stroke="#646464"stroke-width=".52917">
		<path data-id="id-40" d="m150.14 163.32 0.0397 5.8314h-3.7782l-4.7122 0.99483-0.92075 3.3417-6.5961 5.2467 8.0036 1.4155 7.0432 3.3417 6.5961 1.9209 4.7122-0.95515 4.2254-4.2942 4.2651-1.4155 2.8178 2.3283v4.3365l0.92075 3.7888v3.7888l1.4076 3.339 0.84402 7.4136-0.72496 0.16404-0.35454 0.74877-0.11907 0.66675-0.64558 0.42334-1.2515 0.42068-0.76464 0.082-1.2118 0.082-1.8177 0.20373h-0.96044l-0.88106 0.381-1.7251 0.34131-1.8971 0.58473-0.48683 0.082-0.88106 0.34131-0.52653 0.70908-0.44714 0.95515-0.19844 0.91281 0.0397 0.74877-0.11906 0.42334-0.15611 0.87312-0.27781 0.70644-0.6059 0.34131h-0.64558l-0.80433-0.12171-0.52652-0.24341-0.15875-0.38365-0.23813-0.50271-0.23548-0.58473-0.23548-0.75141-0.23548-0.66675 0.0794-0.42334 0.23812-0.34131 0.23813-0.32544 0.40746-0.75141 0.27516-0.6694-0.40745-0.70908-0.36778-0.20373-0.84402-0.24606-0.64558 0.082-0.72231 0.28575-0.64559 0.46302-0.60589 0.75141-0.76465 0.1614-0.64558 0.91281-0.72496 0.24606-0.76464 0.34132-0.88107-0.1614-0.48683-0.42333-0.68527-0.74877-0.68263-0.58473-0.68527-0.6694-0.52652-0.082-0.27781 0.24606-0.23813 0.24607-0.40745 0.50535-0.762 0.34131-0.64559 0.42069-0.44714 0.50535-0.44715 0.54505-0.3175 0.70908-0.0397 0.66675-0.52652 0.24606-1.1721 0.42334-0.68527 0.20108-0.48948 0.28839-0.31486 0.24607-0.80433 0.24341-0.35454-0.28575-0.40746-0.28575-0.72231-0.34131-0.64558 0.46302 0.11906 1.3758 0.23548 1.0795 0.52652 0.91281 0.40746 1.1721 0.0794 0.66675-1.1298 1.3758-0.76465 0.71172-1.0927 1.1721-0.6059 1.0345-0.68527 1.1324-0.60325 0.66675-1.1721-0.24607-0.88106-0.42333-0.68262-0.1614-0.80434-0.082-0.80168 0.66675-0.31486 0.0794-1.4102 0.87312-0.60325 0.20373-0.80433-0.082-0.88106-0.46302-0.52652-0.50271-1.0001-0.66939-0.44714-0.20638-0.56621-0.50271-1.0398 0.1614-0.3175 0.58473-0.19843 0.75142v1.0742l0.15875 0.8308 0.31485 0.99483 0.0794 1.1298-0.0344 0.51329-0.3175 0.381-0.31485 0.66675-0.23548 0.74877-0.15875 0.42334-0.48684 0.38364-0.4101 0.20108-0.52652-0.1217-0.88106-0.12171-0.52652 0.16404-0.64559 0.32808-0.52652 0.42069-0.72496 0.83344-0.56885 0.58473-0.35454 0.83079-0.44715 0.66675-0.48683 0.46302-0.72496 1.1324 0.6059-0.082 0.35454 0.42333-0.35454-0.42333-0.6059 0.082-0.56621-0.16405-0.92339-0.16404-0.92075-0.28575-1.0398-0.54504-0.60589-0.42333-0.6059-0.87313-0.56621-1.2118-0.56621-1.1298-0.44714-0.99483-0.68527-1.3758-0.41011-0.99483-0.68262-0.75142-0.44715-0.46302-0.15875-0.7911 0.0794-0.58473 0.23813-1.1298 0.19844-0.87048 0.23812-0.46567v-0.65087l-0.5662-0.62971-0.76466-1.0345-0.60589-1.1721-0.1958-1.1298-0.0794-1.4578v-0.62971l0.0794-1.1721 0.0794-1.5399v-0.70908l-0.19579-1.2938-0.37042-0.6694-0.23812-0.2831-0.36778-0.34132-0.88106-1.1324-0.72496-1.1748-0.64558-1.0742-0.68527-1.0769-0.6059-1.2118-0.44714-1.1324-0.56621-1.1748-0.76465-2.4527-0.40745-1.1324-1.1324-0.66939-0.72231-0.0397-0.3175 0.20108-0.64559 0.16404-0.56621-0.082h-1.3308l-0.56621-0.75141-0.11906-0.8308-0.37042-0.99483-0.48683-0.6641-0.76465-0.42334-1.0028-0.24606-1.0001-0.16669-1.3309-0.0397-1.0398-0.24607-0.37042-0.082-1.2515-0.20637-0.88107-0.24606-1.0398-0.58473-1.0001-0.34132-1.0028-0.58473-0.48683-0.54504-0.80433-0.70908-0.52652-0.83344-1.1324-0.91281-1.0398-0.6694-0.44715-0.0794-0.72496 0.0794-0.40746 0.99484 0.40746-0.99484 0.19844-1.3335 0.72496-2.3707-0.23813-1.4579-0.19579-0.91281-0.37041-1.2541-0.35455-1.0795-0.40745-1.5372-0.11907-1.8389-0.19579-0.7911-0.52652-0.83344-0.72496-0.50271-0.56621-0.58473 0.88107-0.99483 1.0398-0.99483 1.2515-0.70909 0.84137-0.12171 0.76465 1.0345 0.88106 0.70908 0.80433 0.24606 1.1324 0.50536 1.0001 0.32808 1.1351-0.0847 0.80169-0.082h0.68262l-1.0398-1.9606-0.88106-1.6219-0.56621-1.2144-0.31486-1.4579 0.48684-1.1721 0.84402-0.99484 0.64558-0.58473 0.96044 0.082 1.2515 0.7911 0.96044 0.70908 0.11906-0.42333 0.48683-0.1614 0.48684-0.0423 0.64558 0.0423 0.31485 0.1614 0.40746 0.0423 0.48683 0.0397 0.40746 0.1614 0.41011 0.16668 0.56621 0.20373 1.1721 0.1614 1.4076 0.12435 1.0398 0.34132 2.1722 0.082 1.0001 0.42333 0.80169 0.32544 1.0001-0.99219 0.762-1.5002 1.2515-0.50271 0.52652-1.2144-1.0398-0.70909-1.2118-0.75142-0.27781-0.74877 0.3175-0.75142 0.52652-0.50271 1.0927-0.50535 1.8971-0.74877 1.2885-0.16669 0.84402-1.2118-0.52652-0.95515-1.0001-0.83079-1.0001-0.58473-0.72496-1.0795-0.3175-1.4578-0.60325-1.5002-0.52652-0.70644-0.88106-0.83079-0.76465-0.62706-0.76464-0.381-1.0398-0.58473-0.64293-0.62707 0.0397-0.7911 0.44715-0.34131 1.1324-0.0794 1.0927 0.0794 0.92075-0.1614 0.19844-0.91281-1.2118-1.1748-0.68527-0.7911-0.35454-0.42069-0.23548-1.2144 0.23548-1.1721 0.48683-1.2541 0.96044 0.1614 1.2515 0.42332 0.96044 0.34131 0.76464-0.16403 0.6059-0.42069 0.64558-0.58473 0.27517-0.59002 0.64558-0.0397-0.0794 4.6196 3.0533-0.12171 0.0794-0.99483-0.0794-1.3758-0.0397-0.99484 0.11906-0.99483v-0.99483l-0.3175-0.99219-0.84137-0.99483-0.27782-0.75142 0.23548-1.2541 0.35455-1.3335 0.60589-0.95514 0.76465-1.3758 0.36777-0.91281 0.68527-0.20373-0.11906-0.62441h0.64548l1.0425-0.16405 1.0398 0.12171 0.9234 0.0423 0.80168 0.32808 1.2912 0.87048 0.96044 0.66939 1.0927 0.79111 1.0001 0.24606h0.40746l0.4101 0.16404 0.31486-0.42333 0.1561-0.34131 0.23813-0.46302 0.15875-0.20373 0.52652 0.12171 0.56621 0.46302 0.11906 0.24606 0.6059 0.082 0.84137 0.082 0.68263 0.99483-0.0767 0.66411-0.48948 0.83344-0.72496 0.20372-0.27517 0.28575-0.11906 0.87313 0.6059 0.50271 1.0001-0.12436 0.84138 0.32809 0.64558 0.082 0.56621 0.70908 0.40746 0.381h0.4101l0.23548-0.50271 0.23548-0.50535 0.35454-0.50271 1.2515 0.381 0.84137 0.20373 0.84138 0.54504 0.80433 0.79111-0.0794 0.66675-0.31486 0.83079-0.64558 0.50535-0.40746 0.58473-0.1561 0.42069 0.27516 0.42333 0.64559 0.082 0.80433 0.12171 0.56621 0.12171 0.92075 0.16139 1.1324 0.91281 0.23812 0.46567 0.56621 0.62706 0.48683 1.4579 0.52652 1.2144 0.36777 1.3335 0.3175 0.91281 0.56621 0.99483 1.0001 0.32808h0.60589l0.96044 0.50271 0.31485 0.42333-0.27781 0.24606-0.76464 0.66675-1.0001 0.6694-0.15875 0.75141 0.72496 1.1324 0.96308 0.50271 0.6059 0.7911 0.80433 0.50271 0.76465 0.16404 0.68262 0.082 1.0001 0.0794 1.1324 0.66675 1.0927 0.75142 0.96309 0.1217 0.76464-0.1217 0.92075-0.42334 0.64294-0.16139h0.4101l0.72496 0.58737 0.11907 1.5372 0.48683 2.249 0.52652 1.1324 1.2118 0.58472z"/>
	
		<path data-id="id-40" d="m41.783 50.084 4.146 0.32544 1.4499 0.381 1.6457 0.7911 1.3705 0.32808 1.2912 0.46302 1.4102 0.9525 1.0398 0.91281 0.80433 0.91281 0.72496 0.99483 0.80169 1.2541 0.40746 0.91281 0.03969 0.83079 1.0398 0.71173 1.0927 0.36777 1.4473 0.34131h0.6059l0.6059-0.03969 0.96044 0.20108 0.84138 0.34131h0.56621l1.0001-0.07937 0.88106-0.16404 1.3679-0.16404 0.76465 0.50271 1.2515 1.2541 1.1721 1.0795 1.2118 0.70908 1.2515 0.32808 0.64558-0.46302 1.1324-0.91281 0.72495-0.08202 0.84138-0.75142 1.5266-0.58473h1.7251l1.1721-0.07937 0.68263-0.42333 0.64558-0.70908 0.36777-0.87312 0.27781-0.75142 0.1958-0.91281 0.36777-0.91281 0.35454-0.70908 0.60589-0.03969 0.64559-0.38365-0.44979-0.46302-0.23548-0.7911 0.0794-1.0345 0.3175-0.28575 0.92075 0.12435 0.68527 0.50271 0.68527 0.66675 0.64559 0.83079 0.5662 0.54504 0.36777 0.54504 0.11907 0.66675 0.44714 0.42069 0.0397 0.6694 0.0397 1.5796 0.11906 1.1748 0.15875 1.1721 0.56621 0.50271 0.56621 0.58473 0.64558 0.34131 0.88371 0.66675 0.0397 0.42333 0.27516 0.91281 0.23813 1.0769 0.40746 0.66675 0.72495 0.66675 0.56621 0.58738 0.40746 0.1614 0.92075 0.7911 0.68527 0.7911 0.40746 0.42333 1.0927 1.4155 0.6059 0.99483 0.36777 1.2541-0.23548 1.4975-0.52652 0.99483-0.64559 1.2938-0.68527 0.70908-0.92075 1.1324-0.92075 1.0372-1.1721 1.2938-0.64294 0.87312-0.4101 1.2541 0.0397 0.99218 0.19844 1.1324 0.52652 0.7911 0.48684 0.66675 0.64558 0.42333 0.60589 0.6694 0.92075 1.4975 0.19844 0.91281 0.35454 1.0795 0.92075 1.6616 1.1324 0.6694h1.0001l1.1721-0.99484 0.72231-0.74877 0.40746-0.46302 1.5266-0.32544 1.1324-0.24606 1.2912 0.34131 1.0001 0.03969h1.0001l0.68527-0.50271 0.76465-0.50535 0.5662-0.08202 0.64559-0.07937 0.68527 0.34132 0.88106 0.91281 0.19579 0.1614 0.3175 0.91282-0.19843 0.91281-0.56621 1.5796-0.23813 1.6642-0.23812 1.2541 0.15875 0.91281 0.52652 0.42334 0.84402 0.50271 0.60589 1.0795 0.68528 1.4155-0.6059 0.24606-0.96044 0.83079-1.2118 1.0795-0.56621 1.8812v0.9525l0.0794 1.0768 0.40746 0.87313 1.0001 1.1324 0.52652 0.32544 0.84138 0.6694 0.68527 0.87312-0.44715 0.46302-1.1324 0.42069-0.64558 0.24606-0.31485 1.0769-0.23813 1.3361-0.52652 1.0345-1.0398 1.2144-0.84402 1.4155-0.15611 1.1721-0.27781 1.1748 0.11906 0.99218v1.5822l0.23548 0.91281 0.56621 0.83344 0.11906 0.74877 0.11907 0.62707-0.68527 0.20637-0.37042 0.91281-0.76465 1.3758-0.60325 0.9525-0.35454 1.3361-0.23812 1.2541 0.27516 0.75142 0.84402 0.99218 0.31486 0.99484v0.99483l-0.11906 0.99483 0.0397 0.99219 0.0767 1.3785-0.0767 0.99219-3.0559 0.1217 0.0794-4.6196-0.64558 0.0397-0.27782 0.58473-0.64293 0.58473-0.6059 0.42333-0.76464 0.16404-0.96044-0.34131-1.2488-0.42334-0.96043-0.16404-0.48684 1.2541-0.23548 1.1748 0.23548 1.2118 0.35719 0.42333 0.68263 0.79111 1.2118 1.1721-0.19844 0.91281-0.92075 0.16405-1.0927-0.082-1.1324 0.082-0.44979 0.34131-0.0397 0.7911 0.64558 0.62706 1.0398 0.58473 0.76465 0.38365 0.762 0.62706 0.88106 0.83344 0.52652 0.70908 0.60591 1.5002 0.3175 1.4578 0.72231 1.0742 1.0028 0.58738 1.0001 0.83079 0.52652 0.9525-0.84138 1.2144-1.2912 0.16139-1.8971 0.75142-1.0927 0.50271-0.52651 0.50535-0.3175 0.75142 0.27782 0.74877 1.2118 0.75143 1.0398 0.70908-0.52652 1.2144-1.2488 0.50271-0.76465 1.4975-1.0001 0.99483-0.80433-0.32808-1.0028-0.42334-2.1722-0.0794-1.0398-0.34131-1.4076-0.12171-1.1721-0.16404-0.6059-0.20373-0.35454-0.16404-0.40746-0.1614-0.48683-0.0423-0.44715-0.0397-0.27516-0.16404-0.64559-0.0397-0.48683 0.0397-0.48948 0.16404-0.11906 0.42333-0.96044-0.71173-1.2515-0.7911-0.96044-0.0794-0.64558 0.58473-0.84138 0.99484-0.48948 1.1721 0.3175 1.4578 0.56621 1.2118 0.88106 1.6245 1.0425 1.9632h-0.68527l-0.80433 0.082-1.1324 0.0794-1.0001-0.32544-1.1324-0.50535-0.80433-0.24606-0.88107-0.70909-0.762-1.0345-0.84137 0.12171-1.2515 0.70909-1.0398 0.99483-0.88106 0.99219 0.5662 0.58737 0.72232 0.50271 0.52652 0.83079 0.19843 0.79111 0.11907 1.8812 0.40746 1.5002 0.35454 1.0742 0.36777 1.2568 0.19844 0.91281 0.23547 1.4552-0.72231 2.3707-0.19844 1.3361-0.40745 0.99484-0.11907 0.83079-0.48683 0.91281-0.72496 1.4578-0.27516 0.70909-0.15875 0.20373-0.76465 0.082h-0.72496l-1.0001-0.082-1.3309-0.2884c-9.4377-2.0823-14.396-5.5562-19.473-13.899-3.6751-6.0378-6.5193-12.364-10.808-17.928-3.8285-4.9689-8.1915-9.5276-11.618-14.798-3.2306-4.9689-4.5111-10.316-7.8105-15.161-2.458-3.6142-2.3521-8.5063-1.6378-12.726 0.59531-3.5163 1.4182-6.5167 2.7199-9.7896 0.38894-0.97367 1.0345-1.8256 1.4235-2.7993 0.10583-0.26459 0.35454-2.3363 0.37835-2.3548 0.0291-0.0238 3.6592-2.9184 3.6592-2.9184l3.384-2.0849 4.4635-2.3707 2.0929 1.0742 1.8177-0.24342 3.4211-2.3283 1.3309-5.5483 0.27516-4.7175 0.3175-5.8314-2.0558-7.4956-0.35454-3.0401 3.0136-0.87048 2.0929-0.91281-0.35719-5.289-1.1721-1.5822-1.4076-1.6219-1.1721-2.331z"/>
    </g>
</svg>

</body>
<script>

$("svg path" ).click(function() {
  alert($(this).attr("data-id"));
});

</script>
</html>

Click上的交互式地图（SVG + jQuery）

2 个答案: