根据是否存在 HREF 路径显示/隐藏 BTN

Question

我有一个像这样的json文件...

[
{
"id": "01",
"image": "_img/speakers/2019/Abigail L.jpg",
"organization": "Mumsnet",
"name": "Abigail Lebrecht",
"para": "Stopwords personalisation and Text cleaning at Mumsnet",
"slides": "#"
},
{
"id": "02",
"image": "_img/speakers/2019/Alexis Iglauer.jpg",
"organization": "PartnerRe",
"name": "Alexis Iglauer",
"para" : "Medical underwriting triage: An end-to-end machine learning case study",
"slides": "assets/slides/Thurs 12 Sept/Stream 3 session 3/Alexis Iglauer.pptx"
},
{
"id": "03",
"image": "_img/speakers/2019/Amanda Beedham.jpg",
"organization": "RSA Insurance",
"name": "Amanda Beedham",
"para": "Harnessing AI to Create Insight from Text",
"slides": "assets/slides/Weds 11 Sept/Stream 3 session 2/AmandaBeedham_RSA.pptx"
}
]

该文件实际上比这大得多，但某些 ID 的幻灯片键值设置为#....

我正在使用JavaScript将一堆HTML注入到如下所示的网页中：

// get json file from directory
fetch("_img/speakers/speakers2019.json")
// store json data in res variable
.then(res => res.json())
// loop through json array and output mark up to target
// in index.html on line 447
.then(speakerArr => {
var div = document.querySelector('.row_tile');
for(var i = 0; i < speakerArr.length; i++) {
div.innerHTML += `<div class="col-lg-3 col-xs-6">
<div class="hover-element member member-2" data-title-position="center,center">
<div class="hover-element__initial">
<img src="${speakerArr[i].image}" />
</div>
<div class="hover-element__reveal fade-transiton" data-overlay="9">
<div class="boxed">
<h6>${speakerArr[i].organization}</h6>
<h5>${speakerArr[i].name}</h5>
<p class="small-text">${speakerArr[i].para}</p>
<a class="modalbutton" href="${speakerArr.slides}" download>Slides</a>
</div>
</div>
</div>
</div>`;
}
});

但是此循环遍历 JSON 并显示 JSON 中所有条目的按钮<a class="modalbutton" href="${speakerArr.slides}" download>Slides</a>。我遇到的问题是并非所有按钮都有指向的链接;如何修改此代码，使其在键/值所在的任何地方都显示 OK，#不显示按钮？

到目前为止，我已经尝试过这个：

for(var i = 0; i < speakerArr.length; i++) {
div.innerHTML += `<div class="col-lg-3 col-xs-6">
<div class="hover-element member member-2" data-title-position="center,center">
<div class="hover-element__initial">
<img src="${speakerArr[i].image}" />
</div>
<div class="hover-element__reveal fade-transiton" data-overlay="9">
<div class="boxed">
<h6>${speakerArr[i].organization}</h6>
<h5>${speakerArr[i].name}</h5>
<p class="small-text">${speakerArr[i].para}</p>
if(speakerArr[i].slides === "#"){
<a class="modalbutton" href="${speakerArr[i].slides}" download>Slides</a>
} else {
<a class="modalbutton disabled" href="${speakerArr[i].slides}" download>Unavailable</a>
}
</div>
</div
</div>
</div>`;
}
});

但这并没有按预期工作，我们如何在"中获取 if/else？

理想情况下，我不想在 json 中的键/值#任何地方显示一个按钮，这怎么可能？

Answer 1

我建议使用另一个带有动态按钮的变量来附加：

var btn = ``;
for (var i = 0; i < speakerArr.length; i++) {
if (speakerArr[i].slides === "#"){
btn = `<a class="modalbutton" href="${speakerArr[i].slides}" download>Slides</a>`;
} else {
btn = `<a class="modalbutton disabled" href="${speakerArr[i].slides}" download>Unavailable</a>`;
}
div.innerHTML += `<div class="col-lg-3 col-xs-6">
<div class="hover-element member member-2" data-title-position="center,center">
<div class="hover-element__initial">
<img src="${speakerArr[i].image}" />
</div>
<div class="hover-element__reveal fade-transiton" data-overlay="9">
<div class="boxed">
<h6>${speakerArr[i].organization}</h6>
<h5>${speakerArr[i].name}</h5>
<p class="small-text">${speakerArr[i].para}</p>
${btn}
</div>
</div>
</div>
</div>`;
}

更新：另外，扩展@Bek的答案，这是如何使用三元运算符

for (var i = 0; i < speakerArr.length; i++) {
div.innerHTML += `<div class="col-lg-3 col-xs-6">
<div class="hover-element member member-2" data-title-position="center,center">
<div class="hover-element__initial">
<img src="${speakerArr[i].image}" />
</div>
<div class="hover-element__reveal fade-transiton" data-overlay="9">
<div class="boxed">
<h6>${speakerArr[i].organization}</h6>
<h5>${speakerArr[i].name}</h5>
<p class="small-text">${speakerArr[i].para}</p>
${speakerArr[i].slides == '#' ? `<a class="modalbutton" href="${speakerArr[i].slides}" download>Slides</a>` : `<a class="modalbutton disabled" href="${speakerArr[i].slides}" download>Unavailable</a>`}
</div>
</div>
</div>
</div>`;
}

Answer 2

这应该适用于您的情况：

for(var i = 0; i < speakerArr.length; i++) {
div.innerHTML += `<div class="col-lg-3 col-xs-6">
<div class="hover-element member member-2" data-title-position="center,center">
<div class="hover-element__initial">
<img src="${speakerArr[i].image}" />
</div>
<div class="hover-element__reveal fade-transiton" data-overlay="9">
<div class="boxed">
<h6>${speakerArr[i].organization}</h6>
<h5>${speakerArr[i].name}</h5>
<p class="small-text">${speakerArr[i].para}</p>`;
if(speakerArr[i].slides !== "#"){
div.innerHTML += `<a class="modalbutton" href="${speakerArr[i].slides}" download>Slides</a>`;
} 
div.innerHTML += `</div>
</div>
</div>
</div>`;
}

Answer 3

尝试使用三元运算符，如下所示：

`${speakerArr[i].slides == '#' ? '<a class="modalbutton" href="${speakerArr[i].slides}" download>Slides</a>' : '<a class="modalbutton disabled" href="${speakerArr[i].slides}" download>Unavailable</a>'}`