이미지 목록에서 이미지를 클릭 할 때 작업을 수행하는 JS 이벤트 핸들러를 작성 / 작성하려고합니다. 이를 위해 div나는 목표로 삼고 Js 코드를 붙여 넣었 습니다. 나는 이미지를 클릭하면 정보를 표시하고 아래에 두 번째 이미지를 클릭하면 정보가 표시되기를 원합니다 (이전 이미지의 설명 덮어 쓰기). 내 코드 :
window.onload = function () {
var links = document.getElementsByClassName('a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function (e) {
// Hide results
document.getElementById('placeholder').style.display = 'none';
// Show loader
document.getElementById('loading').style.display = 'block';
if (document.getElementById('imagedescription')) {
// imagedescription = document.getElementById('imagedescription')
// placeholder.parentNode.removeChild(imagedescription)
document.getElementById('imagedescription').style.display = 'none'
}
setTimeout(() => showpic(this), 2000);
e.preventDefault();
});
}
function showpic(pic) {
document.getElementById('loading').style.display = 'none';
var imagedescription = document.createElement('div');
imagedescription.setAttribute('id', 'imagedescription');
var desctext = document.createTextNode('');
imagedescription.appendChild(desctext);
document.getElementById('placeholder').style.display = 'block';
var source = pic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
if (pic.getAttribute('title')) {
var text = pic.getAttribute('title');
} else {
var text = '';
}
if (text == "1") {
prob = '1'
aces = 1
arks = 5
results = {
something:'55',
something1:'44',
something2:'556'
}
} else if (text == "2") {
prob = '1'
aces = 1
arks = 5
results = {
something:'55',
something1:'44',
something2:'556'
}
} else if (text == "3") {
prob = '1'
aces = 1
arks = 5
results = {
something:'55',
something1:'44',
something2:'556'
}
} else if (text == "4") {
prob = '1'
aces = 1
arks = 5
results = {
something:'55',
something1:'44',
something2:'556'
}
} else {
prob = 'Probability 95%'
faces = 1
landmarks = 5
results = {
nose: '(303, 131)',
mouth_right: '(313, 141)',
right_eye: '(314, 114)',
left_eye: '(291, 117)',
mouth_left: '(296, 143)'
}
}
test = `<button type="button" class="btn btn-primary" style="margin-right: 10px;"> <span class="badge">${prob}</span></button> <button type="button" class="btn btn-success" style="margin-right: 10px;">aces <span class="badge">${aces}</span></button><button type="button" class="btn btn-danger">arks <span class="badge">${arks}</span></button><br /> <span class="badge badge-info">something: ${results.something}</span> <br /> <span class="badge badge-info">something1: ${results.something1}</span> <span class="badge badge-info">something2: ${results.something2}</span> <br /> <span class="badge badge-info">something2: ${results.something2}</span> <span class="badge badge-info">Lefted: ${results.something}</span> <br />`
test1 = ``
var imageDescription_d = document.createElement('div');
imageDescription_d.setAttribute("id", "imageDescription_d");
var imageDescription_d2 = document.createElement('div');
imageDescription_d2.setAttribute("id", "imageDescription_d2");
if (imagedescription.firstChild.nodeType == 3) {
imagedescription.firstChild.nodeValue = text;
imageDescription_d.innerHTML = test
imageDescription_d2.innerHTML = test1
}
// imageDescription_d2.innerHTML = test1
placeholder.parentNode.appendChild(imagedescription);
imagedescription.parentNode.insertBefore(imageDescription_d, imagedescription.nextSibling);
imageDescription_d.parentNode.insertBefore(imageDescription_d2, imageDescription_d.nextSibling);
return false;
}
}#loading {
display: none;
}
#imagegallery {
display: inline-block
}
#results {
display: none;
}<div id="content">
<h3>Select Images Below</h3>
<ul id="imagegallery" , style="padding-bottom: 20px;">
<li>
<a class='a' href="./img/team/t1.jpg" title="Black Man in Glasses" onclick="" style="padding-right: 10px;
padding-left: 95px;">
<img src="./img/team/t1.jpg" height="75px" width="75px"
alt="the band in concert" />
</a>
</li>
<li>
<a class='a' href="./img/team/t2.jpg" title="White Man in Glasses"
style="padding-right: 10px;">
<img src="./img/team/t2.jpg" height="75px" width="75px" alt="the bassist" />
</a>
</li>
<li>
<a class='a' href="./img/team/t3.jpg" title="Brown Women"
style="padding-right: 10px;">
<img id='image' src="./img/team/t3.jpg" height="75px" width="75px"
alt="the guitarist" />
</a>
</li>
<li>
<a class='a' href="./img/team/t4.jpg" title="White Women"
style="padding-right: 10px;">
<img id='image' src="./img/team/t4.jpg" height="75px" width="75px"
alt="the audience" />
</a>
</li>
</ul>
<div>
<img id='placeholder' , src="./img/resources/neutral_1.jpg" , height="450px"
width="550px" alt="Image gooes here" , style="margin-bottom: 50px;padding: 10px;">
</div>
<div id="loading">
<img src="img/loading.gif" height="450px" width="550px" alt="">
</div>
<!-- <div id="show">
<h1 id='h'>It works</h1>
</div> -->
</div>
</div>모두는 세부 대체하지 않고, 즉 추가 점을 제외하고 작동 imagedescription_d및 imagedescription_d2그것이 그들에게 새로운 APPEND 만듭니다. 종료하면 삭제하거나 비우지 만 작동하지 않는 다양한 검사를 구현했습니다. 도움이 필요하세요? 내가 어디에서 잘못 되었습니까?
귀하의 코드와 사고 방식이 약간 지저분합니다. 대부분의 HTML 기능을 활용하고 확장 가능한 간단한 방법으로 작업해야합니다. 일이 길고 복잡해지면 항상 다른 간단한 방법을 찾으십시오. 기회가 있습니다.
나는 당신이 data태그와 함께 일어나고 싶은 일에 대한 POC를 작성했습니다 innerHTML.
const description = document.querySelector(".description");
const descriptions = {
img0: "hay im text",
img1: "hay im anouther text"
};
document.addEventListener("click", (e) => {
if (e.target.getAttribute("data-description")) {
description.innerHTML = "loading";
setTimeout(() => {
description.innerHTML = descriptions[e.target.getAttribute("data-description")];
}, 2000);
}
});.img-btn {
margin: 10px;
color: blue;
cursor: pointer;
}
.description {
margin: 10px;
}<div class="img-btn" data-description="img0">img 1</div>
<div class="img-btn" data-description="img1">img 2</div>
<div class="description"></div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다