jquery - 什么时候html 为空然后隐藏逻辑

Question

我有 3 个标记字段，我只想要一个基本逻辑，如果这些字段留空，则<div id="category">不会显示。

[编辑] 更新

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

这是我的 jquery，它似乎对我有用。

if ($j(".required").is(':empty')) {
    $j("#category").hide();
} else {
    $j('#category').show();
}

Answer 1

[更新]

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>

JS：

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

jsfiddle：http: //jsfiddle.net/nyzm/E8X5S/3/

Answer 2

尝试

if ($(".required").html().length > 0) {
    $('#category').show();
}
else {
    $("#category").hide();
}

Answer 3

采用

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

Answer 4

而不是使用:empty，尝试；

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

不需要长度检查，因为空字符串无论如何都会返回 false。

Answer 5

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

Answer 6

试试这个代码

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

Answer 7

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

http://jsfiddle.net/ardeezstyle/Jhvt3/

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