Question

我正在创建一个简单的函数，当两个输入都不为空时显示登录按钮，但是，jQuery似乎不想允许我。

我已经检查过以确保我使用的jQuery API是最新的和正确的，但似乎没有任何异常。

的jQuery ：

$(document).ready(function(){
    var u = $.trim($("#_jq-loC1").val());
    var p = $.trim($('#_jq-loC2').val());
    var l = $('#_jq-slO1');

    if(u.length > 0 && p.length > 0) {
        l.addClass('slO1');
    } else {
        l.removeClass('slO1');
    }
});

HTML ：

<input type="text" name="username" id="_jq-loC1" placeholder="Username" autocomplete="off">
<input type="password" name="password" id="_jq-loC2" placeholder="Password" autocomplete="off">
<input style="width: 0.1px; height:0.1px; opacity: 0; overflow: hidden;" id="login" type="submit" value="">
<div class="send-login-container">
    <label class="send-login" id="_jq-slO1" for="login"></label>
</div>

CSS ：

.slO1{
    width: 54px;
}

干杯。

Answer 1

那是因为您的代码仅在页面加载时执行。因此，如果您稍后更改输入内容，则不会执行任何操作。

您需要观察输入的变化。

在$(document).ready()中，您可以通过以下方式替换代码：

var toggleSubmit = function () {
    var u = $.trim($("#_jq-loC1").val());
    var p = $.trim($('#_jq-loC2').val());
    var l = $('#_jq-slO1');

    if(u.length > 0 && p.length > 0) {
        l.addClass('slO1');
    } else {
        l.removeClass('slO1');
    }
};

$('#_jq-loC1').on('change', function () {
    toggleSubmit();
});

$('#_jq-loC2').on('change', function () {
    toggleSubmit();
});

// Check on page load
toggleSubmit();

Answer 2

问题是因为您在document.ready上附加函数，您必须在文本字段更改上执行此操作。我在小提琴上给你解决方案。你可以尝试一下

＆＃13;

$('#_jq-loC2,#_jq-loC1').on('change',function() {
    var u = $.trim($("#_jq-loC1").val());
    var p = $.trim($('#_jq-loC2').val());
 
    if(u.length > 0 && p.length > 0) {
       alert('Do someting');
    } else {
       //to do something if empty
    }
});

＆＃13;

.slO1{
    width: 54px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<input type="text" name="username" id="_jq-loC1" placeholder="Username" autocomplete="off">
<input type="password" name="password" id="_jq-loC2" placeholder="Password" autocomplete="off">
<input style="width: 0.1px; height:0.1px; opacity: 1; overflow: hidden;" id="login" type="submit" value="Submit">
<div class="send-login-container">
    <label class="send-login" id="_jq-slO1" for="login"></label>
</div>
</body>

</html>

＆＃13;

Answer 3

尝试

if( (u.length > 0) && (p.length > 0) ) {
  // Code
}

据我所知， AND 选择器需要两个语句，因此您必须将表达式组合在一起。

当输入不为空时，jquery不添加类

3 个答案: