Question

我的登录页面上有一个按钮，当你点击它时，它变得不可见而不是那个按钮你会看到一个跨度。代码是：

<script type="text/javascript">
    function enterSystem() {
        document.getElementById("btnLogin").style.display = "none";
        var newtext = document.createTextNode("Wait...");
        document.getElementById("brain13").appendChild(newtext);
    }
</script>

ASP方面：

<span class="lblMessageLoading" id="brain13" onclick="enterSystem();">
<asp:button class="LoginButton" id="btnLogin" name="btnLogin" runat="server" onclick="btnLogin-Click" /> </span>

所以......问题是每次我点击“等待......”它都会继续写新文本，这是同一个文本。我想知道是否有办法解决这个问题。谢谢你的任何建议。

Answer 1

鉴于您的示例代码，最简单的方法是添加一个检查以查看“btnLogin”按钮是否已经不可见，如下所示：

function enterSystem() {
    var loginButton = document.getElementById("btnLogin");
    if (loginButton.style.display !== "none"){
        loginButton.style.display = "none";
        var newtext = document.createTextNode("Wait...");
        document.getElementById("brain13").appendChild(newtext);
    }
}

就个人而言，我更喜欢使用指示文档状态的css类，因为这样可以轻松进行测试，调试并且它会在样式表中保留样式（并且它可以使用单个状态立即影响多个元素）。 / p>

我将其添加到页面样式表中：

body.loginActive #btnLogin
{
    display: none;
}

然后重写enterSystem函数：

function enterSystem()
{
    //  this uses classList which is rather new (http://caniuse.com/classlist)
    //  you may want to rewrite this into a test using a regular expression
    //  e.g. if (/\bloginActive\b/.test(document.body.className))
    if (!document.body.classList.contains('loginActive'))
    {
        //  the classList again, you may want to write this as:
        //  document.body.className += ' loginActive';
        document.body.classList.add('loginActive');
        var newtext = document.createTextNode("Wait...");
        document.getElementById("brain13").appendChild(newtext);
    }
}

无论如何要使用appendchild一次？

1 个答案: