似乎无法更改span元素的类

Question

我正在实现一项功能，以在单击字段右侧的眼睛图标时显示密码字段的内容。 单击该项目时，应该会发生两种情况：1.密码字段应成为文本字段2.眼睛的图标应变成斜线形的眼睛3.再次单击该图标时，两者都会相反。

我将Bootstrap 4.0和Font Awesome用于一般设计和图标。 我当前的代码会更改密码字段的类型，但不会更改按钮上的图标。

有什么想法吗？

HTML部分：

<div class="form-group">
    <label for="password">Passwort</label>
    <div class="input-group" id="show_hide_password">
        <input type="password" id="password" class="form-control" name="password" placeholder="Leer lassen wenn das Passwort nicht ge&auml;ndert werden soll.">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" id="eyeButton" data-action="showPW"><span id="eyeLogo" class="far fa-eye"></span></button>
        </div>
    </div>
</div>

和Javascript部分：

var theeyeButton = document.querySelector("[data-action=showPW]");
var theeyeLogo = document.querySelector("#eyeLogo");
var pwField = document.querySelector("#password");
//var theeyeButton = document.getElementById("showPW");
if (theeyeButton) {
    theeyeButton.addEventListener("click", function (event) {
        if(pwField.type == "text"){
            pwField.type = "password";
            theeyeLogo.className = "far fa-eye";
        }
        else if(pwField.type == "password"){
            pwField.type = "text";
            theeyeLogo.className = "far fa-eye-slash";
        }
    });
}

Answer 1

这会做

 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="form-group"> <label for="password">Passwort</label> <div class="input-group" id="show_hide_password"> <input type="password" id="password" class="form-control" name="password" placeholder="Leer lassen wenn das Passwort nicht ge&auml;ndert werden soll."> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button" id="eyeButton" data-action="showPW" value="button">button<span id="eyeLogo" class="far fa-eye-slash"></span></button> </div> </div> </div> <script> var theeyeButton = document.querySelector("[data-action=showPW]"); var theeyeLogo = document.querySelector("#eyeLogo"); var pwField = document.querySelector("#password"); //var theeyeButton = document.getElementById("showPW"); if (theeyeButton) { theeyeButton.addEventListener("click", function (event) { if(pwField.type == "text"){ pwField.type = "password"; theeyeLogo.className = "far fa-eye-slash"; } else if(pwField.type == "password"){ pwField.type = "text"; theeyeLogo.className = "far fa-eye"; } }); } </script> </body> </html>

Answer 2

试试这个js代码。

var theeyeButton = document.querySelector("[data-action=showPW]");
var theeyeLogo = document.querySelector("#eyeLogo");
var pwField = document.querySelector("#password");
//var theeyeButton = document.getElementById("showPW");
if (theeyeButton) {
    theeyeButton.addEventListener("click", function (event) {
       if(pwField.type == "text"){
            pwField.type = "password";
            document.getElementById("eyeLogo").classList.remove("far", "fa-eye-slash");
            document.getElementById("eyeLogo").classList.add("far","fa-eye");
        }
        else if(pwField.type == "password"){
            pwField.type = "text";
            document.getElementById("eyeLogo").classList.remove("far","fa-eye");
            document.getElementById("eyeLogo").classList.add("far", "fa-eye-slash");
        }
    });
}

似乎无法更改span元素的类

问题描述

2 个解决方案

解决方案1
1 2019-01-13 12:53:44

解决方案2
0 已采纳 2019-01-13 12:57:14

似乎无法更改span元素的类

问题描述

2 个解决方案

解决方案1 1 2019-01-13 12:53:44

解决方案2 0 已采纳 2019-01-13 12:57:14

解决方案1
1 2019-01-13 12:53:44

解决方案2
0 已采纳 2019-01-13 12:57:14