Question

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

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;

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

您可以在classList或for循环中使用for..of进行迭代，以引用HTMLCollection的索引N处的当前元素并获取{{1将该元素的}}传递给id，将switch替换为.insertAdjacentHTML()作为第一个参数，并将HTML字符串替换为第二个参数

"beforeend"

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>

Answer 2

您可以使用$('.container').children('div').each(function(){填充.container>div中的子项，然后使用switch($(this).attr('id')到switch子项id之间的大小写：

$link = "#";

$('.container').children('div').each(function() {
  switch ($(this).attr('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;
  }
  $(this).children('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>

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

2 个答案: