當輸入不爲空時，jquery不會添加類

我正在創建一個簡單的函數，它顯示兩個輸入都不爲空時的登錄按鈕，但是，jQuery似乎不想讓我。當輸入不爲空時，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; 
}

乾杯。

來源

2016-07-24 GROVER.

試着用'$（L）.addClass（ 'SLO1'）;' –

@MdDinar沒有工作，抱歉：/ –

您的代碼做工精細。請參閱[** jsfiddle **]（https://jsfiddle.net/ph3q75c2/） – Mohammad

這是因爲您的代碼只在頁面加載時執行。因此，如果稍後更改輸入的內容，則不會執行任何操作。

您需要注意輸入內容的變化。

在你$(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();

來源

2016-07-24 11:31:59 Elorfin

嗨，這是半工作..用戶將不得不點擊其中一個輸入來顯示登錄按鈕。我該如何做到這一點，以便他們只需要在兩個領域輸入一些東西？ :) –

您可以綁定到'keyup'事件而不是'change'。驗證將在用戶每次鍵入內容時完成。 – Elorfin

謝謝！將在一會兒接受答案:) –

-1

與

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

嘗試據我所知，和選擇想要兩個語句，所以你必須將你的表達在一起。

來源

2016-07-24 11:28:34 Sam

我幾乎可以肯定，這是不需要的..但是，我會盡量嘗試 –

這不需要，也被認爲是一種不好的做法。 'u.length> 0'是一個單一的表達式。 – Elorfin

問題是因爲你在安裝的document.ready功能，你必須做的文本字段的變化。我正在給你提供小提琴的解決方案。你可以嘗試一下

$('#_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 
 
    } 
 
});

.slO1{ 
 
    width: 54px; 
 
}

<!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>

來源

2016-07-24 11:38:58

當輸入不爲空時，jquery不會添加類

回答

相關問題