如果两个文本框的值不为空，则执行函数。

Question

如果两个文本框的值不为空，则执行函数。

3

我有两个文本框 input[type=text] 元素，当它们输入非空值时，我想显示一个 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>

- Michael Schwartz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Satpal · Accepted Answer

您应该在单击处理程序中使用move语句来获取值。

$("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() === "");
});