javascript - 不同的链接取决于div-id？

Question

我正在尝试根据 div 的 id 来添加不同的链接 href 。

a 元素是通过 jQuery 添加的。

我尝试过

$id = document.getElementsByClassName("content-box")[0].id;

但是我不知道如何执行switch-case。我不知道如何检索所有 id。

有没有人有更好的主意，可以给我一个如何解决这个问题的提示？

$link = "#";
$id = "";

switch($id){
 case "box-1":
 $link = "https://www.google.com/";
 break;
 
 case "box-2":
 $link = "https://stackoverflow.com/";
 break;
 
 case "box-3":
 $link = "https://www.apple.com/no/";
 break;
}

jQuery( '.container h2' ).after( 
'<a href="'+ $link +'" id="button-order">Read more</a>'
);

.container {
  display: flex;
}

.content-box {
  width: 30%;
  height: 100px;
  border: 1px solid #000;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div id="box-1" class="content-box">
    <h2>Title 1</h2>
  </div>
  
  <div id="box-2" class="content-box">
    <h2>Title 2</h2>
  </div>
  
  <div id="box-3" class="content-box">
    <h2>Title 3</h2>
  </div>
</div>

Answer 1

$id = document.getElementsByClassName("content-box")[0].id;

仅引用 .getElementsByClassList 返回的 HTMLCollection 索引 0 处的元素。

您可以在 for 或 for..of 循环中使用迭代 classList 来引用索引 N 处的当前元素HTMLCollection 并获取该元素的 id 传递给 switch，用 替换 .insertAdjacentHTML() >“beforeend” 设置为第一个参数，HTML 字符串设置为第二个参数

for (let box of document.getElementsByClassName("content-box")) {

  let $link = "#";
  const $id = box.id;

  switch ($id) {
    case "box-1":
      $link = "https://www.google.com/";
      break;

    case "box-2":
      $link = "https://stackoverflow.com/";
      break;

    case "box-3":
      $link = "https://www.apple.com/no/";
      break;
  }

  box.insertAdjacentHTML("beforeend"
  , '<a href="' + $link + '" id="button-order">Read more</a>');

}

.container {
  display: flex;
}

.content-box {
  width: 30%;
  height: 100px;
  border: 1px solid #000;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div id="box-1" class="content-box">
    <h2>Title 1</h2>
  </div>

  <div id="box-2" class="content-box">
    <h2>Title 2</h2>
  </div>

  <div id="box-3" class="content-box">
    <h2>Title 3</h2>
  </div>
</div>

或者

for (let boxes = document.getElementsByClassName("content-box"), i = 0
    ; i < boxes.length; i++) {

  let $link = "#";
  const box = boxes[i];
  const $id = box.id;

  // same code at `for..of` loop
}