javascript - 从传单的下拉列表中选择背景图层

Question

我正在制作传单 map ，我希望能够从导航栏的下拉菜单中选择背景图层。

<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Bakgrunnkart
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#" id="basemap-osm" value="OpenStreetMap_Mapnik">OSM</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#" id="basemap-water-colour" value="Stamen_Watercolor">Water colour</a>
          <div class="dropdown-divider"></div>
        </div>
      </li>

我在标签中添加了一个值属性，其名称与图层定义的名称相同。不确定这是否是非常“hacky”的好习惯？还在学习中..

我想将所选图层添加到我的 basemap 图层组中以将其显示在 map 上。

例如。

var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});


let basemaps = L.layerGroup()
.addLayer(OpenStreetMap_Mapnik) // default layer to show
.addTo(map);

$(".dropdown-item").click(function(event) {
  event.preventDefault();
  let selectedLayer = ($(this).attr("value"));
  console.log(selectedLayer);
  basemaps.clearLayers()
  basemaps.addLayer(selectedLayer);
});

但是因为 '$(this).attr("value")' 返回一个字符串而不是实际的图层变量，所以我得到了一个类型错误..

知道我该如何解决这个问题吗？我对 js 很陌生，所以我边学边学。=)

Answer 1

很抱歉我在这里发帖:我无法发表评论，因为我没有足够的观点。

• 首先:您是否尝试过将阻止默认值放在函数末尾？ .

我认为这可能是导致您出现问题的原因。

第二:您是否尝试过使用提及值的键 属性？像这样:

$(this).attr("key","value");

或者如果你有多个参数

$(this).attr({
    key:"value",
    key2:"value"
    });

第三:您是否尝试过使用内部使用回调的函数:像这样:

$("body").on("click","Mention_a_parent_if_you_have dropdownitem",function(data){
var myItem = ($(this).closest('dropdown-item')).data();
myItem.attr("Key","value");
});