单击时更改 javascript 中的按钮

Question

I'm using following codes in a JSP page.This is my function to change button text by a button click in JavaScript. How do I change the button to click?我在 JSP 页面中使用以下代码。这是我的 function，通过在 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>

Answer 1

The html seems to be broken. html 好像坏了。 Only use 1 button, never reuse an id attribute.只使用1 个按钮，永远不要重复使用id属性。

It is not completely evident what you want to achieve, but you probably want to add a visibility state to your button and visualize it with an embedded icon and show a matching text.您想要实现的目标并不完全明显，但您可能希望向按钮添加可见性 state 并使用嵌入式图标将其可视化并显示匹配的文本。

Importing the material design font, you would only need to change these texts.导入 Material Design 字体，你只需要更改这些文本。 Your button also needs state to conveniently inform the handler what to do (this could also be derived from the current structure of the element but it would be unneccessarily complicated).您的按钮还需要 state 来方便地通知处理程序要做什么（这也可以从元素的当前结构派生，但它会不必要地复杂）。

Example html示例 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>

Explanation解释

The css class _btn-visible encodes the visibility state for the button. css class _btn-visible编码按钮的可见性 state。
The textual id for the icon to visualize the visibility state is the textual content of the i element inside the button.可视化可见性的图标的文本 id state 是按钮内i元素的文本内容。 This text is changed upon a click.单击后更改此文本。
The button label is remaining text inside the button.按钮 label 是按钮内的剩余文本。 For easier referencing it is wrapped in a span element.为了便于引用，它被包裹在一个span元素中。 This text is also changed upon a click.单击后也会更改此文本。

Answer 2

I think this is what you're looking for.我想这就是你要找的。

HTML HTML

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

JS JS

$(document).ready(function(){
 $("#btnvisibility").click(function(){
    $(this).text($(this).text() == 'visibility' ? 'visibility off' : 
      'visibility');
    });
   });

单击时更改 javascript 中的按钮

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-04-13 15:22:56

解决方案2
-1 2020-04-13 14:34:40

单击时更改 javascript 中的按钮

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-04-13 15:22:56

解决方案2 -1 2020-04-13 14:34:40

解决方案1
0 已采纳 2020-04-13 15:22:56

解决方案2
-1 2020-04-13 14:34:40