javascript - 根据 JS 数组中的值将元素附加到 DOM
问题描述
所以这个问题有点奇怪,但这是我想要完成的:
我需要一个构建特定 URL 的函数,这取决于传递给函数的数据属性中的数组,使用 switch 语句或任何最有效的方法。这是我当前的语法,可能是错误的
const selectUrls = (args) => {
const element = $("#element");
for (let arg in args) {
switch (arg) {
case "facebook":
element.append('<a href="https://facebook.com">Facebook</a>');
break;
case "twitter":
element.append('<a href="https://twitter.com">Twitter</a>');
break;
default:
console.log("error");
break;
}
}
}
$(document).ready(function() {
var services = $("#element").data("services");
selectUrls(...[services]);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="element" data-services="['facebook','twitter']"></section>
最终结果应该是:
索引.html
<section id="element" data-services="['facebook','twitter']">
<a href="https://facebook.com">Facebook</a>
<a href="https://twitter.com">Twitter</a>
</section>
...
显然,如果有更好的方法来实现这一点,我会非常愿意尝试。
谢谢!
解决方案
services
用双引号替换单引号后需要解析
var parsed = JSON.parse(services.replace(/'/g, '"'));
并使用for of
而不是for in
:
$(document).ready(function() {
var services = $("#element").data("services");
// replace the single quote with double quotes and parse it
var parsed = JSON.parse(services.replace(/'/g, '"'));
selectGeoUrls(parsed);
})
const selectGeoUrls = (args) => {
const element = $("#element");
// for of instead of for in to get the element instead of the index
for (let arg of args) {
switch (arg) {
case "facebook":
element.append('<a href="https://facebook.com">Facebook</a>');
break;
case "twitter":
element.append('<a href="https://twitter.com">Twitter</a>');
break;
default:
console.log("error");
break;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="element" data-services="['facebook','twitter']"></section>
推荐阅读
- c# - 如何在 c# 中获取简单的相对文件路径以方便访问文件夹
- java - Apache Camel如何在解组时在未知属性上失败
- .net - DataAdapter.Fill 如何在“一次大命中”中跨数据移动?
- sapui5 - 如何拖放表格的行
- r - 无法在 R 中创建 webshot [TypeError: undefined is not an object]
- responsive-images - 手机srcset结果不一致
- powershell - 使用 powershell 脚本语法的建议
- python - 如何在windows中设置虚拟环境
- javascript - Firestore 数据建模和 angularFire
- html - Bootstrap 在进度条末尾添加“点”