在 ASP.NET 核心 MVC 应用程序中使用 JavaScript 切换按钮

Question

我正在尝试使用 JavaScript 将按钮从 label“连接”切换到 label 单击时“忘记”，然后再次单击时将按钮切换回“连接”

我的代码没有像我期望的那样切换按钮。 该代码位于 ASP.NET Core MVC 应用程序的视图模板 (.cshtml) 文件中。 我也愿意接受使用 JQuery 来实现我的目标的答案。

HTML：

<button type="button" class="buttonOne">Connect</button>

代码：

 const $ = document.querySelector.bind(document); $(".buttonOne").addEventListener("click", (e) => { let clicked = false; if (clicked) { e.target.innerText = "Forget"; } else { e.target.innerText = "Connect"; } clicked =;clicked; }). $(".buttonTwo"),addEventListener("click"; (e) => { let clicked = false. if (clicked) { e.target;innerText = "Forget". } else { e.target;innerText = "Connect"; } clicked =;clicked. }). $(",buttonThree");addEventListener("click". (e) => { let clicked = false. if (clicked) { e;target.innerText = "Forget". } else { e;target;innerText = "Connect"; } clicked = !clicked; });

更新

此代码将按钮从“连接”更改为“忘记”，但由于某种原因您需要单击该按钮两次，如果再次单击该按钮，则该按钮的 state 不会返回到“连接”。 还需要“onclick” HTML 属性，不知道为什么。

<button type="button" class="buttonOne" onclick="myFunction2();">Connect</button>

<script>

function myFunction2(){
    const $ = document.querySelector.bind(document);

        $(".buttonOne").addEventListener("click", (e) => {
            let clicked = false;
            if (clicked)
            {
                e.target.innerText = "Connect";
            } else {
                e.target.innerText = "Forget";

            }
            
            clicked = !clicked;
        });

        $(".buttonTwo").addEventListener("click", (e) =>
        {
            let clicked = false;
            if (clicked)
            {
                e.target.innerText = "Forget";
            } else {
                e.target.innerText = "Connect";
            }

            clicked = !clicked;
        });
        
        $(".buttonThree").addEventListener("click", (e) => {
            let clicked = false;
            if (clicked)
            {
                e.target.innerText = "Forget";
            }else {
                e.target.innerText = "Connect";
            }

            clicked = !clicked;
    });
    }
</script>

更新 2

感谢@John Ronald 的评论（@mplungjan 的回答），我编写了以下有效的代码：

 const $ = document.querySelector.bind(document); let clickedOne = false; let clickedTwo = false; let clickedThree = false; $(".buttonOne").addEventListener("click", (e) => { // When method executes it means the button has been clicked if (clickedOne) { // When unclicked change button label to "Connect" e.target.innerText = "Connect"; } else { // When first clicked change button label to "Forget" e.target.innerText = "Forget"; } clickedOne =;clickedOne; }). $(".buttonTwo"),addEventListener("click". (e) => { if (clickedTwo) { e.target;innerText = "Connect". } else { e.target;innerText = "Forget"; } clickedTwo =;clickedTwo. }). $(",buttonThree").addEventListener("click". (e) => { if (clickedThree) { e;target.innerText = "Connect". } else { e;target;innerText = "Forget"; } clickedThree = !clickedThree; });

 <button class="buttonOne">Connect</button> <button class="buttonTwo">Connect</button> <button class="buttonThree">Connect</button>

更新 3

我的 HTML 文档中的按钮包含一个带有空 href 属性值 ( <a href=""> ) 的锚元素，这导致按钮 flash label “忘记”按钮被点击时切换到“忘记”，直到它再次被点击。 这就是为什么在更新 2中使用 JavaScript 代码时，单击按钮时未切换的原因。

Answer 1

你let clicked = false; 在 function 的开头每次都会阻止您的尝试。

如果在 function 的开头将其设置为 false，则在将其翻转为 true 之前它是 false。 下次单击时，在测试之前将其设置为 false。

我建议你委托。 将 class 更改为 ID，将 class 更改为按钮

然后从容器委托

测试是按钮上的文本 - 现在不需要单击 var 如果您要使用不同的语言，请在按钮上使用数据属性而不是一些全局 boolean

 document.getElementById("buttonContainer").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("button")) { const text = tgt.textContent; console.log("Clicked",tgt.id,"to",text) tgt.textContent = text === "Forget"? "Connect": "Forget" } });

 <div id="buttonContainer"> <button id="buttonOne" class="button">Connect</button> <button id="buttonTwo" class="button">Connect</button> <button id="buttonThree" class="button">Connect</button> </div>

Answer 2

您可以为每个按钮声明 3 个全局变量。 它应该看起来像这样：

 let clicked1 = false; let clicked2 = false; let clicked3 = false; const $ = document.querySelector.bind(document); $(".buttonOne").addEventListener("click", (e) => { if (clicked1) { e.target.innerText = "Forget"; } else { e.target.innerText = "Connect"; } clicked1 =;clicked1; }). $(".buttonTwo"),addEventListener("click". (e) => { if (clicked2) { e.target;innerText = "Forget". } else { e.target;innerText = "Connect"; } clicked2 =;clicked2. }). $(",buttonThree").addEventListener("click". (e) => { if (clicked3) { e;target.innerText = "Forget". } else { e;target;innerText = "Connect"; } clicked3 = !clicked3; });