访问javascript文件中的CSS文件

Question

我有一个用户表单，其中包含名字、姓氏、密码和确认密码字段。现在我添加了一个密码验证和确认密码，以检查两者是否相同。我有一个javascript文件作为

   $(document).ready(function() {
$("#addUser").click(function() {
    var password = document.getElementById('password');
    var confirmPassword = document.getElementById('confirmPassword');
    var message = document.getElementById('confirmMessage');
    var matchingColor = "#008000";
    var nonMatchingColor = "#ff6666";
    if (password.value == confirmPassword.value) {
        confirmPassword.style.backgroundColor = matchingColor;
        message.style.color = matchingColor;
        message.innerHTML = "Passwords Match!"
    } else {
        confirmPassword.style.backgroundColor = nonMatchingColor;
        message.style.color = nonMatchingColor;
        message.innerHTML = "Passwords Do Not Match!"
    }
})

})；

现在我必须从javascript文件中删除css属性。我被要求做一些类似的事情$（'#classYouWantToChange'）.addClass（'passwordMatch'）.removeClass（'passwordDoNotMatch'）我不知道这是怎么回事。有人能帮忙吗。提前谢谢。

这是jsp文件

 <div class="form-horizontal" role="form" id="AddUser">
    <form action="adminAddUserForm" method="post">
        <fieldset>
            <legend>
                <fmt:message key="ManageUsers.ADD_USER" />
            </legend>
        <div class="form-group">
            <label class="control-label col-sm-2" for="firstName"><fmt:message
                    key="addUser.FIRSTNAME_LABEL" /></label> 
            <div class="col-sm-2"> <input type="text" id="firstName" class="form-control" 
                    name="firstName" required aria-required="true" placeholder="Jon"
                    title=<fmt:message key="addUser.FIRSTNAME_INPUT_MESSAGE" />
                    maxlength="30" pattern="[a-zA-Z]+" />
            </div>
        </div>
        <br />         
        <div class="form-group">
            <label class="control-label col-sm-2" for="lastName"><fmt:message
                    key="addUser.LASTNAME_LABEL" /></label>
            <div class="col-sm-2"> <input type="text" id="lastName" class="form-control"
                    name="lastName" required aria-required="true" placeholder="Doe"
                    title=<fmt:message key="addUser.LASTNAME_LABEL" /> 
                    maxlength="30" pattern="[a-zA-Z]+">
            </div>
        </div>
        <br />         
        <div class="form-group">
            <label class="control-label col-sm-2" for="userName"><fmt:message
                    key="addUser.USERNAME_LABEL" /></label> 
            <div class="col-sm-2"> <input type="text" id="userName" class="form-control" 
                    name="userName" required aria-required="true" placeholder="John_Doe" 
                    title=<fmt:message key="addUser.USERNAME_INPUT_MESSAGE" />
                    pattern="^[a-zA-Z0-9]+([_]?[a-zA-Z0-9])*$" >
            </div>
        </div>
        <br />  
        <div class="form-group">
            <label class="control-label col-sm-2" for="password"><fmt:message
                    key="addUser.PASSWORD_LABEL" /></label> 
            <div class="col-sm-2"> <input type="password" name="password" id="password" class="form-control"
                    title=<fmt:message key="ManageUsers.PASSWORD_VALIDATION" />
                    required aria-required="true" pattern="(?=.d)(?=.[A-Z]).{6,}" >
            </div>
            </div>
        <%-- <div id="passwordsMatch" class="passwordsMatch" style="display: none;">
            <h5><fmt:message key="ManageUsers.PASSWORDS_MATCH" /> </h5>
        </div> --%>
        </br>
        <div class="form-group">
            <label for="confirmPassword" class="control-label col-sm-2"><fmt:message 
                key="addUser.CONFIRM_PASSWORD_LABEL" /></label>
            <div class="col-sm-2"> <input type="password" class="form-control" name="confirmPassword" id="confirmPassword">
                <span id="confirmMessage" class="confirmMessage"></span>
        </div>
        </div>
        <div id="passwordsDoNotMatch" class="passwordsDoNotMatch" style="display: none;">
            <h5><fmt:message key="ManageUsers.PASSWORDS_NO_NOT_MATCH" /> </h5>
        </div>
            <c:choose>
                <c:when test="${empty signFilter }">
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="role"><fmt:message 
                                key="addUser.ROLE_LABEL" /></label>
                        <input type="radio" id="role" name="userRole" value="ROLE_USER" 
                            checked="checked" /> <fmt:message key="addUser.ROLE_USER" />
                        <input type="radio" id="role" name="userRole" value="ROLE_INSTRUCTOR" />
                            <fmt:message key="addUser.ROLE_INSTRUCTOR" />
                        <input type="radio" id="role" name="userRole" value="ROLE_ADMIN" />
                            <fmt:message key="addUser.ROLE_ADMIN" />
                    </div>
                </c:when>
                <c:otherwise>
                    <input type="hidden" name="userRole" value="ROLE_USER">
                </c:otherwise>
            </c:choose>
            <br />                       
    <div class="form-group">         
        <div class="col-sm-offset-2 col-sm-5" id="addUser">
            <input type="submit" class= "btn btn-info" name="submitBtn" value="Add User">
        </div>
    </div>

Answer 1

您可以使用以下方法：

//On event trigger:
//Do validations
//If passwords match, then do this -
$('#idYouWantToModify').addClass('passwordMatch')
//If passwords do not match, then do this -
$('#idYouWantToModify').addClass('passwordDoNotMatch')
//You can remove the classes later if you have any additional steps that want you to do so, by doing the following:
$('#idYouWantToModify').removeClass('whicheverClassYouWantToRemove')

您可以阅读更多关于.addClass（）和.removeClass（）的信息

Answer 2

为了简化操作，您可以使用jquery toggle类，比如

//If passwords match, then do this -
$('#idYouWantToModify').toggleClass('passwordMatch')

如果不存在则添加类，如果存在则删除

在此处了解更多信息toggleclass