我下面的代码包含一个带有一些数据的Tab和一个按钮。每当用户单击该按钮时,它将在此链接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>
答案 0 :(得分:3)
就像我在评论中所述,您正在使用ID
(可以将class
(只能分配给单个元素,例如学生ID),有更多元素,例如学校的一堂课。
有关ID
的更多信息,请参见MDN Element ID documentation和{{11}} documentation as well。
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;
}