Jquery 何时<；输入>；html为空，然后隐藏<；部门>；逻辑

我有3个标记字段，我只需要一个基本逻辑，如果这些字段留空，那么这个

将不会显示

[编辑]已更新

<div id="panel"> 
<div id="form">

    <div class="input-prepend">
               <span class="add-on">name</span>
       <input class="span3 required" id="prependedInput" type="text">
    </div>

    <div class="input-prepend">
      <span class="add-on">last name</span>
      <input class="span3 required" id="prependedInput" type="text" placeholder="Your Lastname">
    </div>

    <div class="input-prepend">
      <span class="add-on">email</span>
      <input class="span3 required" id="prependedInput" type="text" placeholder="Your Email">
    </div>

 </div> <!--/form-->
</div>  <!--/panel-->     

<!--DROPDOWN-->
<select id="category">
        <option value="" disabled="disabled" selected="selected">Please select a category</option>
        <option name="choice1" value="blue"> blue  </option>
        <option name="choice2" value="red"> red    </option>
        <option name="choice3" value="pink"> pink  </option>
        <option name="choice4" value="yellow"> yellow </option>
        <option name="choice5" value="violet"> violet </option>
</select>

试一试

使用

---

不要使用

：empty

，请尝试

if ( !$(".required").val() ) {
    $('#category').hide();
}
else {
    $("#category").show();
}

不需要进行长度检查，因为空字符串仍然返回false。

请尝试此代码

if(document.getElementById("prependedInput").value.toString().Length() > 0) {
    document.getElementById("category").style.display = "block";
}
else
{
    document.getElementById("category").style.display = "none";
}

$j(".required").keyup(function () {
    if ( $j.trim($j("this").val()) != "" ) {
        $j('#category').show();
    } else {
        $j("#category").hide();
    }
});

---

[更新]

HTML:

<div id="panel">
    <div id="form">
        <div class="input-prepend"> <span class="add-on">name</span>

            <input class="span3 required" id="prependedInput" type="text">
        </div>
        <div class="input-prepend"> <span class="add-on">last name</span>

            <input class="span3 required" id="prependedInput" type="text" placeholder="Your Lastname">
        </div>
        <div class="input-prepend"> <span class="add-on">email</span>

            <input class="span3 required" id="prependedInput" type="text" placeholder="Your Email">
        </div>
    </div>
    <!--/form-->
</div>
<!--/panel-->
<!--DROPDOWN-->
<select id="category" style="display:none;">
    <option value="" disabled="disabled" selected="selected">Please select a category</option>
    <option name="choice1" value="blue">blue</option>
    <option name="choice2" value="red">red</option>
    <option name="choice3" value="pink">pink</option>
    <option name="choice4" value="yellow">yellow</option>
    <option name="choice5" value="violet">violet</option>
</select>

---

jsFIDLE:

我有一把快速小提琴，你可能会感兴趣

---

此处输入错误

sj（'#category'）.show（）

多放一些html，告诉我们如果有些输入是空的，有些不是空的，你想要什么样的行为？除了输入错误，你可以把它写得短一些，如

$j（'#category'）。toggle（$j（'.required'）。val（）==''）

-将布尔值传递给

。toggle（）

将显示

true

，将其隐藏为

false

$j在Wordpress中用于避免JQUERY和JS中的冲突。@安东这只是一个输入错误，我想你的意思是

if（$j（“.required”）.val（）=''

。您现在拥有的将把值设置为空。检查avlue of.required的值是否为空是的，这是您应该做的。然而，代码并没有这样做，哇！谢谢这起作用了。以前的答案对我不起作用。但你的回答确实如此。你能给我解释一下你的

line2

和

line3

逻辑吗？我有3个更新的代码，如上所示。当我在第3个输入上键入时，显示，即使2个输入为空。我想要的是，所有3个

在

出现之前都有值。第2行所做的是，绑定

keypress

，

keyup

和

将
事件更改为
必需的
类的所有元素。第4行（以前是第3行）所做的是，使用
required
类循环到所有元素中。您好，非常感谢。还有，我想问问你是否介意。你能解释一下这一行吗？
$（'.required'）。每个（函数（i）{
这是否意味着，对于每个需要类的类，都要执行这个函数（i）。这个
i
做什么？如果这是一个简单的问题，我道歉。刚刚开始学习javascript:）
$（'.required'）。每个（函数（i）{
意味着，对于类为
必需的每个元素
执行定义的函数。
i
是元素的索引号。此处不使用该索引号。但在其他地方可能有用。如果您
警报（i）
在函数中，您将看到0、1、2将返回。您好，我喜欢这段代码，但是。它对我不起作用。我已经包含了上面html的全部
。
if(document.getElementById("prependedInput").value.toString().Length() > 0) {
    document.getElementById("category").style.display = "block";
}
else
{
    document.getElementById("category").style.display = "none";
}

$j(".required").keyup(function () {
    if ( $j.trim($j("this").val()) != "" ) {
        $j('#category').show();
    } else {
        $j("#category").hide();
    }
});

<div id="panel">
    <div id="form">
        <div class="input-prepend"> <span class="add-on">name</span>

            <input class="span3 required" id="prependedInput" type="text">
        </div>
        <div class="input-prepend"> <span class="add-on">last name</span>

            <input class="span3 required" id="prependedInput" type="text" placeholder="Your Lastname">
        </div>
        <div class="input-prepend"> <span class="add-on">email</span>

            <input class="span3 required" id="prependedInput" type="text" placeholder="Your Email">
        </div>
    </div>
    <!--/form-->
</div>
<!--/panel-->
<!--DROPDOWN-->
<select id="category" style="display:none;">
    <option value="" disabled="disabled" selected="selected">Please select a category</option>
    <option name="choice1" value="blue">blue</option>
    <option name="choice2" value="red">red</option>
    <option name="choice3" value="pink">pink</option>
    <option name="choice4" value="yellow">yellow</option>
    <option name="choice5" value="violet">violet</option>
</select>

$j(function () {
    $j(".required").on("keypress keyup change", function () {
        var show_flag = true;
        $('.required').each(function (i) {
            if ($(this).val() == "") {
                show_flag = false;
            }
        });
        if (show_flag) {
            $("#category").show();
        } else {
            $("#category").hide();
        }
    });
});

$('.required').each(function(index, element) {
    $(this).val()=="" ? $('#category').hide() : $('#category').show();
});