javascript - 链接未添加到所有图像

Question

下面的代码由带有一些数据的选项卡和一个按钮组成。每当用户单击该按钮时，它都会将此链接 https://cors-anywhere.herokuapp.com/ 添加到我的 img src 中。

问题是我不确定为什么它只添加到第一张图片而不是全部。我的所有图像 ID 都是相同的，我不确定为什么会这样。

这是函数

function clickme() {
    $('#imageID').attr('src', function(index, src) {
      return 'https://cors-anywhere.herokuapp.com/' + src;
    });
  }

如有任何帮助，我们将不胜感激。

var personArr = [];
var person = {
  ["first-Name"]: "John",
  ["last-Name"]: "Doe",
  ["age"]: 21,
  ["hobbies"]: ["football", "swimming", "dancing"],
  ["gender"]: "Male",
  ["person-desc"]: "<br />Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky <br />boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person2 = {
  ["first-Name"]: "Paul",
  ["last-Name"]: "Logan",
  ["age"]: 22,
  ["hobbies"]: ["camping", "sleeping", "eating"],
  ["gender"]: "Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};

personArr.push(person, person2);
console.log(personArr);

var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();

personArr.forEach((person, i) => {
  var name = document.createElement('h4');
  var gender = document.createElement('h4');
  var desc = document.createElement('p');
  var hobb = document.createElement('div');
  var age = document.createElement('age');
  var logo = document.createElement('div');
  var show = document.createElement('div');

  var hobbies = '';
  $.each(person['hobbies'], function(index) {
    hobbies += ('<div>' + person['hobbies'][index] + '</div>');
  });
  hobb.className = "hide";
  logo.className = "thumb";
  age.className = "square";
  hobb.innerHTML = hobbies;
  age.innerHTML = `${person['age']} Age`;
  name.textContent = `Name : ${person['first-Name']} ${person['last-Name']}`;
  desc.textContent = `${person['person-desc']}`;
  show.innerHTML = `<a href="#">Show more</a>`;
  gender.innerHTML = `Gender: ${person['gender']}`;
  logo.innerHTML = `<img id ="imageID" src="https://cdn.bulbagarden.net/upload/thumb/4/49/Ash_Pikachu.png/250px-Ash_Pikachu.png" height="auto" width="70">`;

  frag.appendChild(name);
  frag.appendChild(gender);
  frag.appendChild(age);
  frag.appendChild(logo);
  frag.appendChild(desc);
  frag.appendChild(hobb);
  frag.appendChild(show);

});
parent.appendChild(frag);

//<---------------------------------------------- TAB FUNCTION ------------------------------------------------------->
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();

$(document).ready(function() {
  $('.hide').hide();

  $("a").click(function() {
    $('.hide').toggle();

  });

});

function clickme() {
  $('#imageID').attr('src', function(index, src) {
    return 'https://cors-anywhere.herokuapp.com/' + src;
  });
}

body {
  font-family: Arial;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.line1 {
  display: inline-block;
}

.size {
  width: 50%;
}

a.morelink {
  text-decoration: none;
  outline: none;
}

.morecontent span {
  display: none;
}

h4 {
  margin: 0;
}

.square {
  width: 50px;
  height: 45px;
  font-size: 18px;
  color: #81C784;
  text-align: center;
  background: transparent;
  display: inline-block;
  border: 1px solid #81C784;
}

.thumb {
  float: left;
  border: 1px solid #90A4AE;
  margin-right: 10px;
}

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="//#" />
  <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
  <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
  <button type="button" onclick="clickme();">Click Me!</button>
  <div class="size">
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
    </div>

    <div id="People" class="tabcontent">
      <div class="line1"></div>
    </div>
  </div>
</body>
</html>

Answer 1

就像我在评论中所说的那样，您使用的是 ID(只能分配给单个元素，例如学生 ID)，而您应该使用 class(可以有更多的元素，比如学校的一个类(class))。

有关 ID 的更多信息，请参见 MDN Element ID documentation和 类 documentation as well .

var personArr = [];
var person = {
  ["first-Name"]: "John",
  ["last-Name"]: "Doe",
  ["age"]: 21,
  ["hobbies"]: ["football", "swimming", "dancing"],
  ["gender"]: "Male",
  ["person-desc"]: "<br />Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky <br />boudin picanha shankle turducken prosciutto cow kielbasa tenderloin."
};
var person2 = {
  ["first-Name"]: "Paul",
  ["last-Name"]: "Logan",
  ["age"]: 22,
  ["hobbies"]: ["camping", "sleeping", "eating"],
  ["gender"]: "Male",
  ["person-desc"]: "Bacon ipsum dolor amet short loin doner tail meatloaf hamburger jerky boudin picanha shankle turducken prosciutto cow kielbasa tenderloin. "
};

personArr.push(person, person2);
console.log(personArr);

var parent = document.getElementsByClassName('line1')[0];
var frag = document.createDocumentFragment();

personArr.forEach((person, i) => {
  var name = document.createElement('h4');
  var gender = document.createElement('h4');
  var desc = document.createElement('p');
  var hobb = document.createElement('div');
  var age = document.createElement('age');
  var logo = document.createElement('div');
  var show = document.createElement('div');

  var hobbies = '';
  $.each(person['hobbies'], function(index) {
    hobbies += ('<div>' + person['hobbies'][index] + '</div>');
  });
  hobb.className = "hide";
  logo.className = "thumb";
  age.className = "square";
  hobb.innerHTML = hobbies;
  age.innerHTML = `${person['age']} Age`;
  name.textContent = `Name : ${person['first-Name']} ${person['last-Name']}`;
  desc.textContent = `${person['person-desc']}`;
  show.innerHTML = `<a href="#">Show more</a>`;
  gender.innerHTML = `Gender: ${person['gender']}`;
  logo.innerHTML = `<img class="imageClass" src="https://cdn.bulbagarden.net/upload/thumb/4/49/Ash_Pikachu.png/250px-Ash_Pikachu.png" height="auto" width="70">`;

  frag.appendChild(name);
  frag.appendChild(gender);
  frag.appendChild(age);
  frag.appendChild(logo);
  frag.appendChild(desc);
  frag.appendChild(hobb);
  frag.appendChild(show);

});
parent.appendChild(frag);

//<---------------------------------------------- TAB FUNCTION ------------------------------------------------------->
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();

$(document).ready(function() {
  $('.hide').hide();

  $("a").click(function() {
    $('.hide').toggle();

  });

});

function clickme() {
  $('.imageClass').attr('src', function(index, src) {
    return 'https://cors-anywhere.herokuapp.com/' + src;
  });
}

body {
  font-family: Arial;
}


/* Style the tab */

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.line1 {
  display: inline-block;
}

.size {
  width: 50%;
}

a.morelink {
  text-decoration: none;
  outline: none;
}

.morecontent span {
  display: none;
}

h4 {
  margin: 0;
}

.square {
  width: 50px;
  height: 45px;
  font-size: 18px;
  color: #81C784;
  text-align: center;
  background: transparent;
  display: inline-block;
  border: 1px solid #81C784;
}

.thumb {
  float: left;
  border: 1px solid #90A4AE;
  margin-right: 10px;
}

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<style>

</style>

<head>
  <meta charset="utf-8" />

  <link rel="shortcut icon" href="//#" />
  <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
  <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>

<body>
  <button type="button" onclick="clickme();">Click Me!</button>
  <div class="size">
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'People')" id="defaultOpen">People</button>
    </div>

    <div id="People" class="tabcontent">
      <div class="line1">

      </div>
    </div>
  </div>

</body>

</html>

<script>
</script>