Question

我正在使用JQuery对一个按钮HTML元素进行以下更改。必须有更好的方法来写这个吗？

         $("#showHide").click(function () {
            if ($("#form_password").attr("type") == "password") {
                $("#form_password").prop('type', 'text');
                $("#showHide").html('Hide');
                $("#showHide").removeClass("toggle-hide");
                $("#showHide").addClass("toggle-show");
                $('#showHide').prop('title', 'Hide Password');
                $('#showHide').attr("aria-label","Hide Password");
                $('#showHide').attr("aria-pressed","true");

            } else {
                $("#form_password").prop('type', 'password');
                $("#showHide").html('Show');
                $("#showHide").removeClass("toggle-show");
                $("#showHide").addClass("toggle-hide");
                $('#showHide').prop('title', 'Show Password');
                $('#showHide').attr("aria-label","Show Password");
                $('#showHide').attr("aria-pressed","false");

            }
        });

Answer 1

试试这个：

$(document).ready(function(){

    $("#showHide").on("click",function(){

        if ($("#form_password").attr("type") == "password") {

            $("#form_password").attr('type', 'text');
            $(this).attr({title:"Hide Password","arria-label":"Hide Password","aria-pressed":"true"});
            $(this).toggleClass("toggle-hide toggle-show").html("hide");
        }

        else {

            $("#form_password").attr('type', 'password');
            $(this).attr({title:"Show Password","arria-label":"Show Password","aria-pressed":"false"});
            $(this).toggleClass("toggle-hide toggle-show").html("Show");

        }

    })
})

最终代码：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        
    </style>
</head>
    <body>
        <input type="password" id="form_password" value="root"><button id="showHide">Show</button>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            
    $(document).ready(function(){

        $("#showHide").on("click",function(){
            if ($("#form_password").attr("type") == "password") {
                $("#form_password").attr('type', 'text');
                $(this).attr({title:"Hide Password","arria-label":"Hide Password","aria-pressed":"true"});
                $(this).toggleClass("toggle-hide toggle-show").html("hide");
            }

            else {
                $("#form_password").attr('type', 'password');
                $(this).attr({title:"Show Password","arria-label":"Show Password","aria-pressed":"false"});
                $(this).toggleClass("toggle-hide toggle-show").html("Show");

            }

        })

    })
        
        </script>
    </body>
</html>

＆＃13;

Answer 2

您可以先获取该项目，然后分配属性：

    $("#showHide").click(function () {
        var form_password = $("#form_password");
        var showHide = $("#showHide");
        if (form_password.attr("type") == "password") {
            form_password.prop('type', 'text');
            showHide.html('Hide');
            showHide.removeClass("toggle-hide");
            showHide.addClass("toggle-show");
            ...

Answer 3

我使用了上述答案的组合，它的工作原理看起来更清晰 - 谢谢

  var form_password = $("#form_password");
    var showHide = $("#showHide");

    showHide.click(function () {
        if (form_password.attr("type") == "password") {
            form_password.prop('type', 'text');
            showHide.attr({title:"Hide Password","aria-label":"Hide Password","aria-pressed":"true"});
            showHide.toggleClass("toggle-hide toggle-show").html("Hide");
        } else {
            form_password.prop('type', 'password');
            showHide.attr({title:"Show Password","aria-label":"Show Password","aria-pressed":"false"});
            showHide.toggleClass("toggle-hide toggle-show").html("Show");
        }
    });
}

将多个属性更改应用于一个元素

3 个答案: