0
以下は私のコードです。サムネイル画像が表示されたときに削除ボタンを表示したい。私は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);
Javascriptを
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または同等にそれを置くことができればちょうどこのスキミングし、コードの大部分を見てから、それはクールになります –