我有一个侧边栏，其中li包含使用 JS 生成的元素，但我想避免显示li其中包含一些空元素的元素。
到目前为止，我成功地从侧边栏中隐藏了爱尔兰的国家名称和链接名称，但我无法弄清楚如何消除包含空名称的 li。
我的对象数组包含 2 个国家，但由于爱尔兰不包含元素，我希望li删除对应于爱尔兰的内容。
li 生成的 HTML 如下所示：
<li class="agency">
<a href="#" class="agency-link" id="IE">
<img src="https://via.placeholder.com/150" alt="Ireland">
<div class="agency-content">
<h4 class="country-name"></h4>
<span class="agencies-names"></span>
</div>
</a>
</li>
我为隐藏爱尔兰的国家名称和链接名称而编写的条件是：
if ((group.data[i][`linkName${codeLang}`] && group.data[i][`link${codeLang}`]) != "") {
agencyN.textContent = group.data[i][`linkName${codeLang}`];
countryN.textContent = group.data[i][`country${codeLang}`];
} else {
// remove the li that doesn't have displayed the country name or the link name
}
谁能解释一下？谢谢！
am4core.ready(function () {
am4core.useTheme(am4themes_animated);
let chart = am4core.create("map", am4maps.MapChart);
chart.responsive.enabled = true;
chart.geodata = am4geodata_worldHigh;
chart.projection = new am4maps.projections.Miller();
chart.zoomControl = new am4maps.ZoomControl();
let homeButton = new am4core.Button();
homeButton.events.on("hit", function () {
chart.goHome();
});
homeButton.icon = new am4core.Sprite();
homeButton.padding(7, 5, 7, 5);
homeButton.width = 30;
homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
homeButton.marginBottom = 10;
homeButton.parent = chart.zoomControl;
homeButton.insertBefore(chart.zoomControl.plusButton);
chart.homeZoomLevel = 3.3;
chart.homeGeoPoint = { longitude: 14.5, latitude: 54 };
let colorSet = "#000";
let groupData = [
{
"data": [
{
"countryEN": "Austria",
"id": "AT",
"linkEN": ["http://www.example.com"],
"linkNameEN": ["Link Name 1"],
"capital": "Vienna",
"latitude": 48.2082,
"longitude": 16.3738,
"color": colorSet,
"img": "https://via.placeholder.com/150"
},
{
"countryEN": "Ireland",
"id": "IE",
"linkEN": [""],
"linkNameEN": [""],
"capital": "Dublin",
"latitude": 53.3498,
"longitude": -6.2603,
"color": colorSet,
"img": "https://via.placeholder.com/150"
}
]
}
];
let excludedCountries = ["AQ"];
const findUrl = "http://www.example.com/en/";
const regex = /\.com\/(\w{2})\//;
const match = regex.exec(findUrl);
const result = match && match[1];
let codeLang = result.toUpperCase();
groupData.forEach(function (group) {
let series = chart.series.push(new am4maps.MapPolygonSeries());
series.name = group.name;
series.useGeodata = true;
let includedCountries = [];
series.include = includedCountries;
series.fill = am4core.color(group.color);
series.setStateOnChildren = true;
series.calculateVisualCenter = true;
series.tooltip.label.interactionsEnabled = false;
series.tooltip.keepTargetHover = true;
series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color("#fff");
series.tooltip.background.stroke = am4core.color("#003399");
series.tooltip.background.strokeWidth = 1;
group.data.forEach(function (country) {
includedCountries.push(country.id);
excludedCountries.push(country.id);
});
let polygonTemplate = series.mapPolygons.template;
polygonTemplate.cursorOverStyle = am4core.MouseCursorStyle.pointer;
// Generating list of countries, agencies and flags on sidebar
let ul = document.getElementById('map-list');
for (let i = 0; i < group.data.length; i++) {
let li = document.createElement('li');
li.setAttribute('class', 'agency');
ul.appendChild(li);
let a = document.createElement('a');
a.href = '#';
a.setAttribute('class', 'agency-link');
a.setAttribute('id', group.data[i].id);
li.appendChild(a);
let img = document.createElement('img');
img.src = group.data[i].img;
img.alt = group.data[i][`country${codeLang}`];
a.appendChild(img);
let div = document.createElement('div');
div.setAttribute('class', 'agency-content');
a.appendChild(div);
let titleInDiv = document.createElement('h4');
titleInDiv.setAttribute('class', 'country-name');
div.appendChild(titleInDiv);
let span = document.createElement('span');
span.setAttribute('class', 'agencies-names');
div.appendChild(span);
let countryNames = document.getElementsByClassName("country-name");
let agenciesNames = document.getElementsByClassName("agencies-names");
let agencyN = agenciesNames[i];
let countryN = countryNames[i];
// Agencies and Countries Name on sidebar
if (group.data[i][`linkName${codeLang}`] && group.data[i][`link${codeLang}`]!= "") {
agencyN.textContent = group.data[i][`linkName${codeLang}`];
countryN.textContent = group.data[i][`country${codeLang}`];
} else {
// remove the li that doesn't display the Country Name or the Link Name
}
}
let mapPolygonTemplate = series.mapPolygons.template;
mapPolygonTemplate.fill = am4core.color("dodgerblue");
mapPolygonTemplate.fillOpacity = 0.8;
mapPolygonTemplate.nonScalingStroke = true;
mapPolygonTemplate.tooltipPosition = "fixed";
mapPolygonTemplate.events.on("over", function (event) {
series.mapPolygons.each(function (mapPolygon) {
mapPolygon.isHover = false;
});
event.target.isHover = false;
event.target.isHover = true;
});
mapPolygonTemplate.events.on("out", function (event) {
series.mapPolygons.each(function (mapPolygon) {
mapPolygon.isHover = false;
});
});
let hoverState = mapPolygonTemplate.states.create("hover");
hoverState.properties.fill = am4core.color("#FFCC00");
series.data = JSON.parse(JSON.stringify(group.data));
});
let worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
let worldSeriesName = "world";
worldSeries.name = worldSeriesName;
worldSeries.useGeodata = true;
worldSeries.exclude = excludedCountries;
worldSeries.fillOpacity = 0.5;
worldSeries.hiddenInLegend = true;
worldSeries.mapPolygons.template.nonScalingStroke = true;
});body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
h3.countryName,
h3.countryNameTtp {
font-size: 1rem;
color: #003399;
}
a.countryLinks {
line-height: 1.5rem;
}
#map {
width: 100%;
height: 600px;
overflow: hidden;
}
#map a,
b {
cursor: pointer;
color: #003399;
text-align: center;
font-family: "Open Sans", sans-serif;
}
#map a:hover {
color: #023432;
}
#map-list {
padding: 0;
list-style: none;
}
#map-list ul {
border-color: #eee;
padding: 0;
margin: 0;
}
.agency a {
text-decoration: none;
border-bottom: 1px solid #f3f3f3;
}
.agency a:hover {
background-color: #f3f3f3;
}
.agency-link {
display: flex;
align-items: center;
padding: 1rem;
}
.agency-link img {
object-fit: contain;
width: 50px;
height: 50px;
}
.agency-content {
font-size: 0.8rem;
color: gray;
padding: 0.5rem 0 0.5rem 0.5rem;
word-break: break-word;
}
.agencies-names {
font-size: 1rem;
}
.agency-content h4 {
color: #000000;
font-size: 1rem;
}
.map-list li {
border: 1px solid #cccccc;
border-bottom: 0;
list-style-type: none;
padding: 0;
margin: 0;
}
.map-list li:last-of-type {
border: 1px solid #cccccc;
}
.map-sidebar {
height: 600px;
overflow-y: scroll;
position: relative;
}
@media screen and (max-width: 768px) {
.map-sidebar {
height: 150px;
overflow-y: scroll;
}
.map-search-form {
width: 100%;
position: sticky;
position: -webkit-sticky;
top: 0;
}
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldHigh.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script src="js/custom.js"></script>
<div class="container">
<div class="row">
<div class="map-sidebar col-lg-3 col-md-12 col-sm-12 px-0">
<ul id="map-list"></ul>
</div>
<div class="col-lg-9 col-md-12 col-sm-12 px-0">
<div id="map"></div>
</div>
</div>
</div>