如果兩個文本框的值不爲空執行功能

小提琴：http://liveweave.com/TBJ9EZ 如果兩個文本框的值不爲空執行功能

我有兩個文本框的input[type=text] elements什麼，我想做的事，只要他們有一個值是「不爲空」我要顯示一個div，並一旦其中任何一個都有空白值來隱藏div。

我在做什麼錯？

$(document).ready(function() { 
 
    var AppName = $(".appname").val(), 
 
     AppUrl = $(".appurl").val(); 
 

 
    $("input").on("keyup change", function() { 
 
    if ((AppName === "") && (AppUrl === "")) { 
 
     $("div").addClass("hide"); 
 
    } else { 
 
     $("div").removeClass("hide"); 
 
    } 
 
    }); 
 
});

.hide { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Check Fields</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=9" /> 
 
    <link type="text/css" rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" /> 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <input class="appname" type="text" placeholder="Application name"> 
 
    <input class="appurl" type="text" placeholder="http://website.com/"> 
 
    <div class="hide">All fields are filled :)</div> 
 
    </body> 
 
</html>

來源

2015-05-29 Michael Schwartz

您應該使用移動語句來獲取點擊處理程序中的價值。

$("input").on("keyup change", function() { 
    var AppName = $(".appname").val(), 
     AppUrl = $(".appurl").val(); 

    if ((AppName === "") && (AppUrl === "")) { 
     $("div").addClass("hide"); 
    } else { 
     $("div").removeClass("hide"); 
    } 
});

您還可以使用.toggleClass(state)

一個布爾值，以確定該類是否應該被添加或刪除。

$("input").on("keyup change", function() { 
    $("div").toggleClass("hide", $(".appname").val() === "" && $(".appurl").val() === ""); 
});

來源

2015-05-29 06:14:57 Satpal

我必須在輸入函數中有變量嗎？ –

@ mikethedj4，我沒有得到你的評論，請重新編寫它 – Satpal

爲什麼AppName和AppUrl全局變量必須在輸入函數中？有沒有解決辦法？（我只是想更好地理解這一點） –

如果兩個文本框的值不爲空執行功能

回答

相關問題