Question

我正在努力让以下功能正常工作，但事实并非如此，我无法弄清楚为什么

<script type="text/javascript">
    function hideLevel() {
        if if isNaN($('#id_course')) {
            $('#id_level').hide();
            $('#level').hide();
            $('#id_level').parents('.control-group').hide();
        }
    }
    $(document).ready(hideLevel);
    $('#id_course').change(hideLevel);
</script>

我只是在选择值时尝试隐藏表单字段。我的意思是，当某人选择一个数字值时，某些字段必须消失。

以下是表单的html代码：

<form class="form-horizontal">

    <div class="control-group">
        <label class="control-label">Cours</label>
            <div class="controls">
                <select id="id_course" name="course">
                    <option value="" selected="selected">---------</option>
                    <option value="nl">Néerlandais</option>
                    <option value="fr">Français</option>
                    <option value="01">Anglais</option>
                    <option value="02">Allemand</option>
                    <option value="03">Latin</option>
                </select><br>

            </div>
    </div>


    <div class="control-group">
        <label class="control-label">Niveau</label>
            <div class="controls">
                <ul id="id_level">
                    <li>
                        <label for="id_level_0"><input class="level" id="id_level_0" name="level" type="checkbox" value="1" /> 1ère secondaire</label>
                    </li>
                    <li>
                        <label for="id_level_1"><input class="level" id="id_level_1" name="level" type="checkbox" value="2" /> 2ème secondaire</label>
                    </li>
                    <li>
                        <label for="id_level_10"><input class="level" id="id_level_3" name="level" type="checkbox" value="4" /> 4ème secondaire</label>
                    </li></ul><br>

            </div>
    </div>


    <div class="form-actions">
    <br><br>
        <div class="col-md-6 col-md-offset-2">
            <input type="submit" value="Publier" /><br><br><br> 
        </div> 
    </div>
</form>

我正在学习Jquery但是在这个简单的脚本中，我只是看不出问题所在：（

这是jsfiddle：http://jsfiddle.net/dvryqvLz/1/

----
EDIT
----

我现在意识到问题是isNaN功能，我没有解释为什么我要使用它，请原谅我。

我有两种课程，基于课程，我想让一些领域消失。我的想法是区分数字和字符串。一个类别的值为字符串，另一个类别为数字。该函数必须区分值是否为数字，如果是，则字段必须消失。

无论如何，谢谢你的回答：）

Answer 1

您错过了()条件中的括号if：

if !isNaN($('#id_course')) {

应该是：

if ( !isNaN($('#id_course')) ) {

此外，您还必须使用.val()来获取条件中所选元素的值：

if ( !isNaN( $('#id_course').val() ) ) {

您可以使用：

$(function(){ //Ready function
     hideLevel();
     $('body').on('change', '#id_course', function(){
        hideLevel();
     });
});

而不是：

$(document).ready(hideLevel);
$('#id_course').change(hideLevel);

注意：在下面的示例中，您可以看到添加了else子句，因为当您选择具有数字值的其他元素时，您必须再次显示这些字段。

希望这有帮助。

function hideLevel() {
    if ( isNaN($('#id_course').val()) || $('#id_course').val() == "") {
        $('#id_level').show();
        $('#level').show();
        $('#id_level').parents('.control-group').show();
    }else{
        $('#id_level').hide();
        $('#level').hide();
        $('#id_level').parents('.control-group').hide();
    }
}

$(function(){ //Ready function
    hideLevel();

    $('#id_course').on('change', function(){
        hideLevel();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal">

    <div class="control-group">
        <label class="control-label">Cours</label>
            <div class="controls">
                <select id="id_course" name="course">
                    <option value="" selected="selected">---------</option>
                    <option value="nl">Néerlandais</option>
                    <option value="fr">Français</option>
                    <option value="01">Anglais</option>
                    <option value="02">Allemand</option>
                    <option value="03">Latin</option>
                </select><br>
                            
            </div>
    </div>

       
    <div class="control-group">
        <label class="control-label">Niveau</label>
            <div class="controls">
                <ul id="id_level">
                    <li>
                        <label for="id_level_0"><input class="level" id="id_level_0" name="level" type="checkbox" value="1" /> 1ère secondaire</label>
                    </li>
                    <li>
                        <label for="id_level_1"><input class="level" id="id_level_1" name="level" type="checkbox" value="2" /> 2ème secondaire</label>
                    </li>
                    <li>
                        <label for="id_level_10"><input class="level" id="id_level_3" name="level" type="checkbox" value="4" /> 4ème secondaire</label>
                    </li></ul><br>
                            
            </div>
    </div>
                

    <div class="form-actions">
    <br><br>
        <div class="col-md-6 col-md-offset-2">
            <input type="submit" value="Publier" /><br><br><br> 
        </div> 
    </div>
</form>

Answer 2

isNan是一个函数，用于检查以下值是否可以转换为数字。它不适用于元素。您应该使用.length属性来检查元素是否存在。

if($('#id_course').length > 0) 
{
   $('#id_level').hide();
   $('#level').hide();
   $('#id_level').parents('.control-group').hide();
}

检查NaN的值：

  if(!isNaN($('#id_course').val()))
  {
     $('#id_level').hide();
     $('#level').hide();
     $('#id_level').parents('.control-group').hide();
  }

Answer 3

当您可能想要检查isNaN($("#id_course"))的值是否为＆＃34;＆＃34;时，请检查$("#id_course") （空字符串）。在这种情况下，!isNaN不是正确使用的函数，因为即使空字符串也会返回true。

function hideLevel() {
    if ($('#id_course').val()!="") {
        $('#id_level').hide();
        $('#level').hide();
        $('#id_level').parents('.control-group').hide();
    }
}
hideLevel();
$('#id_course').change(hideLevel);

您可以在此处查看有效的jsFiddle：http://jsfiddle.net/dvryqvLz/5/

修改
我首先想到的是，当选择了一个选项时你想要隐藏组，现在我意识到你可能想要在选择不选项时隐藏组。在这种情况下，您可以使用isNaN：

function hideLevel() { if (!isNaN($('#id_course').val())) { $('#id_level').hide(); $('#level').hide(); $('#id_level').parents('.control-group').hide(); }else{ $('#id_level').show(); $('#level').show(); $('#id_level').parents('.control-group').show(); } }

http://jsfiddle.net/dvryqvLz/6/

选择值时隐藏表单中的字段

3 个答案: