Question

我有简单的注册表格，密码输入是：

<label for="pass">Password:</label>
    <div class="input-group input-group-md">
      <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-cog"></span></span>
      <input type="password" class="form-control" placeholder="Password" aria-describedby="sizing-addon1" id="pass">
    </div>
    <br>
    <label for="pass_confirm">Confirm password:</label>
    <div class="input-group input-group-md">
      <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-envelope"></span></span>
      <input type="password" class="form-control" placeholder="Confirm password" aria-describedby="sizing-addon1" id="confirmPass">
    </div>
    <br>
    <p id="passwordMatch"></p>

我希望显示带有id =“passwordMatch”的段落，并根据结果显示所需的确切文本。我的jquery代码是：

$('#confirmPass').on('keyup', function () {
        if ($('#confirmPass').val() == $('#pass').val()) {
            $('#passwordMatch')[0].style.display = "block";
       // use array to convert jquery to object     $('#passwordMatch').html('Password match!').css('color', 'green');
        } else {
            $('#passwordMatch').html('Password do not match!').css('color', 'red');
        }
    });

但是当我在输入中输入一些随机密码时，控制台告诉我没有定义.style属性。在此之前我使用$（'this'），但我发现我得到了一个对象，因此我无法直接访问DOM。没关系，用if（'＃confirmPass'）更改了它.val（），我仍然得到同样的错误。

Answer 1

如果您需要直接访问DOM对象，则应使用$('#passwordMatch')[0].style.display = "block";

但是，由于您已经使用了jQuery，我建议您使用$('#passwordMatch').show();

Answer 2

问题是你在jquery Selector上使用.style - 试试这个而不是.style：

$('#passwordMatch').css("display", "block");

Answer 3

将代码行更改为：

 $('#passwordMatch').css({'display':'block'});

Answer 4

$('#passwordMatch')返回一个集合，因此它没有样式属性。您应该选择是否要使用jQuery或纯javascript并坚持使用它。 jQuery - ＆gt; $('#passwordMatch').css('display','block');

如果你真的想，你也可以这样做：

$('#confirmPass').on('keyup', function () {
        if ($('#confirmPass').val() == $('#pass').val()) {
            $('#passwordMatch')[0].style.display = "block";
            $('#passwordMatch').html('Password match!').css('color', 'green');
        } else {
            $('#passwordMatch').html('Password do not match!').css('color', 'red');
        }
    });

如果匹配则检查两个密码时未定义样式属性

4 个答案: