使用加载图标切换元素

Toggle element with loading icon

本文关键字：元素 图标 加载      更新时间：2023-09-26

我想做的是当用户单击按钮时，将按钮的图像更改为加载图标。

我的 JavaScript 函数看起来像这样 - 

function GenerateDetail() {
    var resBtn = $('ctl00_cpMain_cntnrRoot').find("btn_generateDetail");
    if (resBtn != null) {
        toggleElement(resBtn);
    }
}
function toggleElement(aRelEle) {
    if ($(aRelEle).css("display") != "none") {
        addImage(aRelEle);
        $(aRelEle).css("display", "none");
    }
    else {
        $(aRelEle).prev().remove();
        $(aRelEle).css("display", "inline");
    }
}
function addImage(aParEle) {
    var aImage = document.createElement("img");
    var aSrc = "App_Themes/Images/activityloader.gif";
    aImage.border = "0";
    aImage.src = aSrc;
    aParEle.appendChild(aImage);
}

在 toggleElement 中，$（aRelEle）.css（"display"） 是未定义的。为什么？"ctl00_cpMain_cntnrRoot"是我在页面上所有元素周围的一个div。

我认为问题出在这条线上：

 var resBtn = $('ctl00_cpMain_cntnrRoot').find("btn_generateDetail");

什么是ctl00_cpMain_cntnrRoot？它是一个类吗？那么它应该是.ctl00_cpMain_cntnrRoot还是一个id？那么它应该是：#ctl00_cpMain_cntnrRoot

同样，对于您的查找（）。btn_generateDetail是 id 还是类？

您是否正在使用 html 按钮标签。如果是这样，您可以将图像放在按钮中并为其提供显示="none"的样式，那么您可以在单击按钮时切换此样式。例：

<button>
    <img id="loadingIcon" src="" style="display:none"/> Button Text Here
</button>
相关文章：