javascript - 根据 JS 数组中的值将元素追加到 DOM

Question

所以这个问题有点奇怪，但这就是我想要完成的任务:

我需要一个函数来构建特定的 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>

最终结果应该是:

index.html

<section id="element" data-services="['facebook','twitter']">
    <a href="https://facebook.com">Facebook</a>
    <a href="https://twitter.com">Twitter</a>
</section>

...

显然，如果有更好的方法来实现这一点，我会非常愿意尝试。

谢谢!

Answer 1

将单引号替换为双引号后，需要解析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>