javascript - 链接未添加到所有图像
问题描述
我在下面有这段代码,它由一个带有一些数据的选项卡和一个按钮组成。每当用户单击按钮时,它都会将此链接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>
解决方案
就像我在评论中所说的那样,您正在使用 an ID
(只能分配给单个元素,例如学生 ID),而您应该使用 a class
(可以有更多元素,例如学校的班级)。
MDN Element ID 文档和文档ID
中的更多信息。class
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>
推荐阅读
- db2 - DB2 error: SQL10007N Message "-1390" could not be retrieved. Reason code: "3"
- php - WooCommerce:如何有条件地更改产品链接?
- python - 通过 REST API 发送测量值的问题
- node.js - Firebase 功能存储文件下载链接生成需要时间
- python - Ansible 由于其构建的 ssh 问题而挂起
- angular - 角 | 如何订阅对象数组的更改
- css - 我可以用 .any 分配在 page_source 中找到的元素位置吗?方法到一个变量,所以我可以稍后在 Ruby 代码中引用它?
- python-3.x - 打开包装并一步计算它们
- tensorflow - 使用预训练的分类模型作为特征提取器来训练对象检测模型
- python - 在 GridSearch CV 之后进行预测时是否遵循管道步骤