Question

我正在尝试在Mapbox弹出窗口中动态创建"Feature","properties":{"field_1":71,"city":"Gothenburg", "course1":"EMM-Nano","course2":"EMHRPP","course3" :"MFAMILY","course4":"NA","course5":"NA","course6":"NA", "course7":"NA","course8":"NA","course9":"NA","course10":"NA", "course11":"NA","course12":"NA","course13":"NA","course14":"NA", "course15":"NA","course16":"NA","lon":11.97456,"lat":57.70887, "website1":"http://www.emm-nano.org/", "website2":"http://ws1.roehampton.ac.uk/admissions/erasmusmundus/hrp/index.html", "website3":"http://www.mfamily.eu/", "website4":"NA","website5":"NA","website6":"NA", "website7":"NA","website8":"NA","website9":"NA", "website10":"NA","website11":"NA","website12":"NA", "website13":"NA","website14":"NA","website15":"NA", "website16":"NA","code":"Gothenburg","title":"Gothenburg"个链接。当鼠标悬停在某个位置时，我会返回一个数组，例如：

course

如您所见，将用作href的url是数组中的字符串。每个website都与course1相关联，因此website1应与course2相关联，website2应与NA相关联，依此类推。此时，我的弹出窗口仅分别显示课程和链接，例如：

使用以下代码删除var feature = features[0]; function htmlFromProps(props) { var html = ""; var i = 0; for (p in props) { if (props[p] && props[p] != "null" && props[p] != "NA") { html += "<div>" + (i === 0 ? "<strong>" : ""); html += props[p]; html += (i++ === 0 ? "</strong>" : "") + "</div>\n"; } } return html; } //delete unnecessary elements* delete feature.properties["field_1"]; delete feature.properties["lon"]; delete feature.properties["lat"]; delete feature.properties["code"]; delete feature.properties["title"]; // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(feature.geometry.coordinates) .setHTML(htmlFromProps(feature.properties)) .addTo(map); }和其他不需要的值：

course

这样可行，但链接未附加到href名称。我感兴趣的是只显示包含ApnsPayload的课程名称本身是否有一种编程方式可以在JS中使用CSS而不使用CSS？我已经研究了几个例子this one，但它不适用于现在的结构。如何解决这个问题的任何建议将不胜感激。

Answer 1

将属性解析为课程和网站数组，然后处理它们以匹配它们。

以下是一个例子：

＆＃13;

var properties = {
  "city": "Gothenburg",
  "course1": "EMM-Nano",
  "course2": "EMHRPP",
  "course3": "MFAMILY",
  "course4": "NA",
  "course5": "NA",
  "course6": "Course6",
  "course7": "Course7",
  "course8": "Course8",
  "course9": "Course9",
  "course10": "Course10",
  "course11": "Course11",
  "course12": "Course12",
  "course13": "Course13",
  "course14": "Course14",
  "course15": "Course15",
  "course16": "Course16",
  "course17": "Course17",
  "course18": "Course18",
  "course19": "Course19",
  "course20": "Course20",
  "course21": "Course21",
  "website1": "url1",
  "website2": "url2",
  "website3": "url3",
  "website4": "NA",
  "website5": "NA",
  "website6": "url6",
  "website7": "url7",
  "website8": "url8",
  "website9": "url9",
  "website10": "url10",
  "website11": "url11",
  "website12": "url12",
  "website13": "url13",
  "website14": "url14",
  "website15": "url15",
  "website16": "url16",
  "website17": "url17",
  "website18": "url18",
  "website19": "url19",
  "website20": "url20",
  "website21": "url21",
};


alert("Output:" + htmlFromProps(properties));

function htmlFromProps(props) {
  var city = "";
  var courses = [];
  var websites = [];
  for (p in props) {
    if (props[p] && props[p] != "null" && props[p] != "NA") {
      if (isCourse(p)) {
        courses[getIndex(p)] = props[p];
      } else if (isWebsite(p)) {
        websites[getIndex(p)] = props[p];
      } else {
        city = props[p];
      }
    }
  }
  return buildHTML(city, courses, websites);
}

function isCourse(propname) {
  return (propname.indexOf("course") != -1);
}

function isWebsite(propname) {
  return (propname.indexOf("website") != -1);
}

function getIndex(propname) {
  var indexRegEx = new RegExp("^.*?(\\d+)$");
  var matches = indexRegEx.exec(propname);
  if ((matches != null) && (matches.length == 2)) {
    return parseInt(matches[1]);
  } else {
    return 0;
  }
}

function buildHTML(city, courses, websites) {
  var html = "";
  html += "<div><strong>";
  html += city;
  html += "</strong></div>\n";

  for (i = 1; i < courses.length; i++) {
    if (courses[i]) {
      html += "<div>";
      html += "<a href='" + websites[i] + "'>" + courses[i] + "</a>";
      html += "</div>\n";
    }
  }
  return html;
}

＆＃13;

只需忽略此代码段顶部的var属性和alert语句，并将htmlFromProps（）函数替换为原始函数，并将htmlFromProps（）下方此片段中的所有剩余函数添加到代码中。

Answer 2

var html = getHtml()
console.log(html)
document.write(html)
function getHtml(){
  var links = getLinks(getData())
  return links.map((x)=>{
    return `<a href="${x.website}">${x.course}</a>`
  }).join(",\n")  
}

function getLinks(data){
  return Object.keys(data).reduce((last,x)=>{
    if (/course(\d+)/.test(x)){
      var websiteKey = 'website'+RegExp.$1
      if(data[x] != 'NA' && data[websiteKey] && data[websiteKey]!='NA'){
        last.push({
          course:data[x],
          website:data[websiteKey].replace('http: //','http://')
        })
      }
    }
    return last
  },[])
}

function getData(){
  return {
    "field_1": 71,
    "city": "Gothenburg",
    "course1": "EMM-Nano",
    "course2": "EMHRPP",
    "course3": "MFAMILY",
    "course4": "NA",
    "course5": "NA",
    "course6": "NA",
    "course7": "NA",
    "course8": "NA",
    "course9": "NA",
    "course10": "NA",
    "course11": "NA",
    "course12": "NA",
    "course13": "NA",
    "course14": "NA",
    "course15": "NA",
    "course16": "NA",
    "lon": 11.97456,
    "lat": 57.70887,
    "website1": "http: //www.emm-nano.org/",
    "website2": "http: //ws1.roehampton.ac.uk/admissions/erasmusmundus/hrp/index.html",
    "website3": "http: //www.mfamily.eu/",
    "website4": "NA",
    "website5": "NA",
    "website6": "NA",
    "website7": "NA",
    "website8": "NA",
    "website9": "NA",
    "website10": "NA",
    "website11": "NA",
    "website12": "NA",
    "website13": "NA",
    "website14": "NA",
    "website15": "NA",
    "website16": "NA",
    "code": "Gothenburg",
    "title": "Gothenburg"
}}

循环用于从javascript数组中的字符串创建href

2 个答案: