아래 코드가 제 코드입니다. 미리보기 이미지가 표시되면 제거 버튼을 표시하고 싶습니다. F12 키를 눌러 코드의 요소를 검사하면 이미지에 이미지가 추가되었음을 알 수 있지만 축소판 이미지가 표시되면 제거 단추가 표시되지 않습니다. 다른 사람이 문제를 해결하도록 도와 줄 수 있습니까? 미리 감사드립니다. 건배!Javascript & CSS : 마우스를 올리면 제거 버튼이 표시되지 않습니다.
personDom.onclick = (function(person, that) {
return function(e) {
var retVal = c.faces.onclick(person);
var input = inputBox[0].id;
var divId;
var requiredImgList = document.getElementById("imageReqDivList");
var optionalImgList = document.getElementById("imageOpDivList");
var fyiImgList = document.getElementById("imageFYIDivList");
var arrayList;
var unique = true;
if(input == "required") {
divId = "requiredImage";
arrayList = requiredImgList.value.split(", ");
for (var i = 0; i < arrayList.length; i++) {
if(arrayList[i].startsWith(person.email)) {
unique = false;
alert("This person has already been added");
}
}
if(unique) {
requiredImgList.value = requiredImgList.value + person.email + ", ";
}
document.getElementById('required').value = "";
}
else if(input == "optional") {
divId = "optionalImage";
arrayList = optionalImgList.value.split(", ");
for (var i = 0; i < arrayList.length; i++) {
if(arrayList[i].startsWith(person.email)) {
unique = false;
alert("This person has already been added");
}
}
if(unique) {
optionalImgList.value = optionalImgList.value + person.email + ", ";
}
document.getElementById('optional').value = "";
}
else if(input == "fyi") {
divId = "fyiImage";
arrayList = fyiImgList.value.split(", ");
for (var i = 0; i < arrayList.length; i++) {
if(arrayList[i].startsWith(person.email)) {
unique = false;
alert("This person has already been added");
}
}
if(unique) {
fyiImgList.value = fyiImgList.value + person.email + ", ";
}
document.getElementById('fyi').value = "";
}
if(unique) {
get_data(person.email, person.uid, divId);
}
//If the click handler returns a value, then put it in the input
if (typeof retVal == "string") {
h.setValue(inputBox, retVal);
this.hideResults();
inputBox[0].focus();
}
}.bind(that);
})(result, this);
자바 스크립트
function get_data(email, userId, divId) {
createImage("https://www.apparels.com/image/"+ useId +"?s=60", email, useId, divId);
}
function createImage(src, alt, title, divId) {
var img = document.createElement("img");
img.style.zIndex = -1;
var imgDelIcon = document.createElement("a");
imgDelIcon.style.zIndex = 1;
img.src = src;
if (alt != null) img.alt = alt;
if (title != null) img.title = title;
imgDelIcon.href = "#";
imgDelIcon.className = "delete";
img.setAttribute("class", "img-circle");
document.getElementById(divId).appendChild(img);
document.getElementById(divId).parentNode.appendChild(imgDelIcon);
}
HTML
<div class="form-group">
<label class="control-label col-md-3" for="event">Required:</label>
<div class="col-md-7">
<input type="event" class="typeahead form-control" id="required" placeholder="Enter required attendees">
<div id="container">
<div id="requiredImage" alt="Faces"></div>
</div>
<textarea id="imageReqDivList" hidden="true" readonly="true"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="event">Optional:</label>
<div class="col-md-7">
<input type="event" class="typeahead form-control" id="optional" placeholder="Enter optional attendees">
<div id="optionalImage" alt="Faces"></div>
<textarea id="imageOpDivList" hidden="true" readonly="true"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="event">FYI:</label>
<div class="col-md-7">
<input type="event" class="typeahead form-control" id="fyi" placeholder="Enter to be informed attendees">
<div id="fyiImage" alt="Faces"></div>
<textarea id="imageFYIDivList" hidden="true" readonly="true"></textarea>
</div>
</div>
Remove.css:
#container {
overflow:auto;
}
.image {
width:60px;
height:60px;
float:left;
position:relative;
}
a.delete {
display:none;
position:absolute;
top:0;
right:-3;
width:20px;
height:20px;
background-size: auto 30px;
border-radius: 50px;
text-indent:-999px;
}
a.delete:hover {
border: 1px solid blue;
}
.image:hover
a.delete {
display:block;
}
Demo.css:
body {
font-family: sans-serif;
text-align: center;
background-color: #fafafa;
}
header h1 {
font-size: 5em;
color: #6c7d95;
font-weight: bold;
text-shadow: 1px 1px white, -1px -1px black;
/* text-shadow: #fff 1px 1px 0; */
margin: 30px 0;
}
.typeahead {
width: 490px;
padding: 5px;
border: 1px solid #888888;
/* -moz-box-shadow: 0px 0px 2px 0px #e4e4e4; */
-moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.75);
}
당신이 우리가 문제를 해부하는 것이 더 쉽게하는 jsfiddle 또는 동등한에 넣어 수 있다면 그냥이 감추고 코드의 대부분보고에서, 그것은 멋진 것 –