javascript - style.opacity 在 ajax 函数中不起作用
问题描述
我在我的网站上创建了拖放功能。当您将图像放入该区域时,将显示图像预览以及右上角的 X 标记,表示删除图像。但是,当我将图像放在该区域时,X 标记不可见。不透明度不会变成 1。
这是我的代码。代码很长,但我选择了相关部分:-
let deleteImage;
$(document).ready( function () {
deleteImage = document.getElementById("deleteImage").addEventListener('click', removeImage);
})
function handleDrop(e) {
let xhr = new XMLHttpRequest(),
data = new FormData();
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log("Response " + this.responseText);
imageUrlInput.value = this.responseText;
previewDropArea.setAttribute("src", this.responseText );
//------------- This code isn't working -----------------------------------
deleteImage.style.opacity = "1";
}
}
}
let removeImage = function (event) {
previewDropArea.setAttribute("src", "#");
imageUrlInput.value = "";
this.style.opacity = "0";
}
这是我与之相关的 SASS:-
#deleteImage{
height: 20px;
width: 20px;
align-self: flex-start;
position: relative;
left: 90px;
opacity: 0;
}
解决方案
您已将其定义deleteImage
为 from 的返回值addEventListener
,因此它不是 HTML 元素。
您需要定义deleteImage
为 from 的返回值getElementById
。
推荐阅读
- ios - SwiftUI:在用户按下按钮之前显示视图
- python - 排列的东西
- crash-reports - 我可以强制 Windows 创建崩溃的 .NET 应用程序的本地转储吗?
- arrays - C:我必须初始化函数中使用的数组吗?
- rust - 为什么 [u8] 没有实现 Clone?
- c++ - 让 WinVerifyTrust 使用目录签名文件,例如 cmd.exe
- random - 随机下一个活动按钮
- javascript - 处理带有空字段的搜索查询 - cloudant & node js
- php - 在不移动文件的情况下更改子域 URL
- powershell - 高级安装程序 powershell 内联脚本 APPDIR 为空