单击时更改javascript中的按钮

加布里埃尔

我在 JSP 页面中使用以下代码。这是我通过在 JavaScript 中单击按钮来更改按钮文本的功能。如何更改按钮以单击？

<!-- btn1 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
  <i class="material-icons">visibility</i>
  visibility
</button>

<!-- btn2 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
  <i class="material-icons">visibility_off</i>
  visibility off
</button>

<script>
    $(document).ready(function () {
        $("#btnvisibility").on("click", function () {
            $(".visibility").toggle("slow");
            if ($(this).val() == "visibility")
                $(this).val("visibility off");
            else
                $(this).val("visibility");
        });
    });

</script>

塌陷

html 好像坏了。只使用1 个按钮，从不重复使用id属性。

您想要实现的目标并不完全清楚，但您可能希望为按钮添加可见性状态，并使用嵌入的图标将其可视化并显示匹配的文本。

导入材料设计字体，您只需要更改这些文本。您的按钮还需要状态以方便地通知处理程序要做什么（这也可以从元素的当前结构派生，但它会不必要地复杂）。

示例 html

<!DOCTYPE html>
<!--
    https://stackoverflow.com/questions/61189795/change-button-in-javascript-when-clicked
-->
<html>
    <head>
        <title>Adorning buttons with material icons</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
        <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#btnvisibility").on("click", function ( eve ) {
                    let b_isVisible = this.classList.contains("_btn-visible")
                      , s_buttontext
                      , s_text
                      ;

                    if (b_isVisible) {
                        s_buttontext    = 'visibility off';
                        s_text          = 'visibility_off';
                        this.classList.remove("_btn-visible");
                    } else {
                        s_buttontext    = 'visibility';
                        s_text          = 'visibility';
                        this.classList.add("_btn-visible");
                    }                      
                    $("span", this).text(s_buttontext);
                    $("i", this).text(s_text);
                    $(this).val(s_buttontext);
                });
            });
        </script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <button id="btnvisibility" class="btn btn-primary btn-round _btn-visible">
            <i class="material-icons">visibility</i>
            <span>visibility</span>
        </button>
    </body>
</html>

解释