在静态地图上更改活动项目的引脚颜色 [英] Changing pin colour for active item on static map

问题描述

这里是小提琴：

https：// jsfiddle.net/0a0yo575/1/

JS没有错误。据我所知，它应该从点击的那个类中删除red-point类，并用green-point类替换？

  if（previousTarget）{
 previousTarget.className =; 
} 
 
 event.target.className =green-point; 
  

解决方案

我不是很熟悉Javascript， jQuery我可以很容易地解决你的问题（我假设这是确定，因为你有 jQuery 标签上你的问题;-)）。我也对CSS进行了一些小的更改，所以地图上的引脚实际上是正确的大小。此外，我向引脚添加了一个 cursor：pointer ，所以它实际上是清楚的，你可以点击它们。请参阅下面的完整工作示例，或使用小提琴： https://jsfiddle.net/0a0yo575/3/

  $（document）.ready（function（）{$（'。abs'）。 abs'）。removeClass（'green-point'）。addClass（'red-point'）; $（this）.removeClass（'red-point'）。addClass（'green-point'）; $ '）.css（'font-weight'，''）; $（'。link [data-marker ='+ $（this）.attr（id）+']' （'red-point'）;''''''''''''。 $（'＃'+ $（this）.data（'marker'））。removeClass（'red-point'）。addClass（'green-point'）; $（'。link'）。css ';';''）; $（this）.css（'font-weight'，800）;}）;}）;    a {cursor：pointer; } .abs {position：absolute; width：20px; height：32px; background-position：中心;背景重复：无重复; cursor：pointer; } #termini {top：37.5％;左：61.8％; } #french {top：45.5％;左：55.1％; } #mark {top：58％;左：39.3％; } #hakkasan {top：65％;左：12.6％; } #american {top：62％;左：42.8％; } #experiment {top：54％;左：57.2％; } #milk {top：37.3％;左：39.5％; } #pig {top：37.1％;左：38.5％; } #opium {top：55％;左：55.7％; } div {position：relative; } div.img-responsive {width：100％;身高：65.5％ } .red-point {background-image：url（http://s23.postimg.org/842300vmv/point.png）; background-position：中心;背景重复：无重复; } .green-point {background-image：url（http://s21.postimg.org/9u6n8t38z/green.png）; background-position：中心;背景重复：无重复; background-size：30px; }  

 < script src =https：// ajax .googleapis.com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< div> < img class =img-responsivesrc =http://s11.postimg.org/cbggzlpib/map.png> < div class =abs red-pointid =termini> < a onClick =turnGreen（event）>< / a> < / div> < div class =abs red-pointid =french> < a onClick =turnGreen（event）>< / a> < / div> < div class =abs red-pointid =mark> < a onClick =turnGreen（event）>< / a> < / div> < div class =abs red-pointid =hakkasan> < a onClick =turnGreen（event）>< / a> < / div> < div class =abs red-pointid =american> < a onClick =turnGreen（event）>< / a> < / div> < div class =abs red-pointid =experiment> < a onClick =turnGreen（event）>< / a> < / div> < div class =abs red-pointid =milk> < a onClick =turnGreen（event）>< / a> < / div> < div class =ab red-pointid =pig> < a onClick =turnGreen（event）>< / a> < / div> < div class =abs red-pointid =opium> < a onClick =turnGreen（event）>< / a> < / div>< / div>< ol> < li class =linkdata-marker =termini> < a>酒吧Termini< / a> < / li> < li class =linkdata-marker =french> < a>法语House< / a> < / li> < li class =linkdata-marker =mark> < a>马克酒吧< / a> < / li> < li class =linkdata-marker =hakkasan> < a> Hakkasan（bar）< / a> < / li> < li class =linkdata-marker =american> < a> Brasserie Zedel的Bar Americain< / a> < / li> < li class =linkdata-marker =experiment> < a>实验鸡尾酒俱乐部< / a> < / li> < li class =linkdata-marker =milk> < a>牛奶&蜂蜜< / a> < / li> < li class =linkdata-marker =pig> < a> Blind Pig< / a> < / li> < li class =linkdata-marker =opium> < a>< a> < / li>< / ol>  

Here's the fiddle:

https://jsfiddle.net/0a0yo575/1/

There's no errors with the JS. As far as I can tell, it should remove the "red-point" class from whatever is clicked and replace it with the "green-point" class?

if (previousTarget) {
    previousTarget.className = "";
}

event.target.className = "green-point";

解决方案

I'm not very familiar with Javascript, but using jQuery I can easily fix your problem (I'm assuming this is OK since you have the jQuery tag on your question ;-) ). I've also made some minor changes to the CSS so the pins on the map are actually the correct size. Furthermore, I added a cursor: pointer to the pins so it's actually clear that you can click them. See fully working example below, or on Fiddle: https://jsfiddle.net/0a0yo575/3/

$(document).ready(function() {

  $('.abs').click(function() {
    $('.abs').removeClass('green-point').addClass('red-point');
    $(this).removeClass('red-point').addClass('green-point');
    $('.link').css('font-weight', '');
    $('.link[data-marker="' + $(this).attr("id") + '"]').css('font-weight', 800);
  });

  $('.link').click(function() {
    $('.abs').removeClass('green-point').addClass('red-point');
    $('#' + $(this).data('marker')).removeClass('red-point').addClass('green-point');
    $('.link').css('font-weight', '');
    $(this).css('font-weight', 800);
  });

});

    a {
      cursor: pointer;
    }
    .abs {
      position: absolute;
      width: 20px;
      height: 32px;
      background-position: center center;
      background-repeat: no-repeat;
      cursor: pointer;
    }
    #termini {
      top: 37.5%;
      left: 61.8%;
    }
    #french {
      top: 45.5%;
      left: 55.1%;
    }
    #mark {
      top: 58%;
      left: 39.3%;
    }
    #hakkasan {
      top: 65%;
      left: 12.6%;
    }
    #american {
      top: 62%;
      left: 42.8%;
    }
    #experiment {
      top: 54%;
      left: 57.2%;
    }
    #milk {
      top: 37.3%;
      left: 39.5%;
    }
    #pig {
      top: 37.1%;
      left: 38.5%;
    }
    #opium {
      top: 55%;
      left: 55.7%;
    }
    div {
      position: relative;
    }
    div.img-responsive {
      width: 100%;
      height: 65.5%;
    }
    .red-point {
      background-image: url("http://s23.postimg.org/842300vmv/point.png");
      background-position: center center;
      background-repeat: no-repeat;
    }
    .green-point {
      background-image: url("http://s21.postimg.org/9u6n8t38z/green.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 30px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <img class="img-responsive" src="http://s11.postimg.org/cbggzlpib/map.png">

  <div class="abs red-point" id="termini">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="french">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="mark">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="hakkasan">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="american">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="experiment">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="milk">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="ab red-point" id="pig">
    <a onClick="turnGreen(event)"></a>
  </div>
  <div class="abs red-point" id="opium">
    <a onClick="turnGreen(event)"></a>
  </div>
</div>

<ol>
  <li class="link" data-marker="termini">
    <a>Bar Termini</a>
  </li>
  <li class="link" data-marker="french">
    <a>French House</a>
  </li>
  <li class="link" data-marker="mark">
    <a>Mark's Bar</a>
  </li>
  <li class="link" data-marker="hakkasan">
    <a>Hakkasan (bar)</a>
  </li>
  <li class="link" data-marker="american">
    <a>Bar Americain at Brasserie Zedel</a>
  </li>
  <li class="link" data-marker="experiment">
    <a>Experimental Cocktail Club</a>
  </li>
  <li class="link" data-marker="milk">
    <a>Milk &amp; Honey</a>
  </li>
  <li class="link" data-marker="pig">
    <a>Blind Pig</a>
  </li>
  <li class="link" data-marker="opium">
    <a>Opium</a>
  </li>
</ol>

这篇关于在静态地图上更改活动项目的引脚颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！