Question

我隐藏了一些在numbFish问题中输入数字时显示的输入字段。我已经尝试了.on和.change方法，但输入字段没有显示

有人能说出我做错了吗？

<head>
<script>
function catchData()     
{

    $('#submitbttn').click(function (e) 
    {
        if (parseInt($("#numbFish").val(), 10) === "" || parseInt($("#numbFish").val(), 10) === 0 || isNaN(parseInt($("#numbFish").val(), 10))) 
        {
            alert("Enter The Number Of Species");
            e.preventDefault();
            return false;
        }

        var numberOfSpec = $("#numbFish").val()

        $('#numbFish').on('input', function ()  <-- NOT EXECUTING
        {
            alert('Number of species: ' + numberOfSpec);
            if (parseInt($(this.value), 10) > 0) 
            {
                for (i = 0; i < $numberOfSpec; i++) 
                {
                    $('#' + numsp[i]).show();
                }
            }
        });

    });

}   

$(document).ready(function () 
{
    var numsp = ["spec1", "spec2", "spec3", "spec4", "spec5"];
    for (i = 0; i < numsp.length; i++) 
    {
        $('#' + numsp[i]).hide();
    }
    catchData();
});

</script>
</head>
<body>
<form  method="POST" name="catchinfo" id="catchinfo">

<div class="container">  
    <div class='span4'>
        Number of the fish Species caught<br>
        <input id='numbFish' name="numbFish" type='text'/>
    </div>

</div><!-- end container-->

<div class="container">  
    <div class="row">  
        <div class="span4" id = 'spec1' name = 'spec1'>
            Enter name of the first fish Species<br>
        <input type='text'>
        </div>
        <div class="span4" id = 'spec2' name = 'spec2'>
            Enter name of the second fish Species<br>
            <input type='text'>
        </div>
        <div class="span4" id = 'spec3' name = 'spec3'>
            Enter name of the third fish Species<br>
            <input type='text'>
        </div>
        <div class="span4" id = 'spec4' name = 'spec4'>
            Enter name of the fourth fish Species<br>
            <input type='text'>
        </div>
        <div class="span4" id = 'spec5' name = 'spec5'>
            Enter name of the fifth fish Species<br>
            <input type='text'>
        </div>
    </div> <!-- end row -->
</div><!-- end container-->


    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.min.js"></script>
    <script src="jquery-dropdown/jquery.dropdown.js"></script>
    <script src="bootstrap-select/bootstrap-select.js"></script>


</form>
</body>
</html>

Answer 1

正如我在评论中提到的，一个问题是你没有引用你的JQuery库。像这样在外部引用的开头添加它。此外，在加载库之前，您正在执行JQuery。您应该将脚本放在库下面。

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="jquery-dropdown/jquery.dropdown.js"></script>
<script src="bootstrap-select/bootstrap-select.js"></script>
<script>
$(document).ready(function () {
   $("#numbFish").change(function () {
      alert($(this).val()); 
   });

   $("#submitbttn").click(function (e) {
      if (parseInt($("#numbFish").val(), 10) === "" || parseInt($("#numbFish").val(), 10) === 0 || isNaN(parseInt($("#numbFish").val(), 10))) 
        {
           alert("Enter The Number Of Species");
           e.preventDefault();
           return false;
       }
   });
});
</script>

就你的JQuery而言，Matt Burland正确地指出你将事件处理程序放在事件处理程序中。您的numbFish更改事件仅在submit click事件发生后才会开始工作。为了帮助您朝着正确的方向前进，我已经抽象了您的几个函数并将它们放在上面的代码块中，同时还有working example on JsFiddle

Answer 2

你写的内容存在很多问题，但关键的问题是$('#numbFish').on('input'....处理程序。在提交表单之前不会执行此操作，此时我猜测为时已晚。因此，您需要在提交方法之外移动该事件处理程序：

$('#submitbttn').click(function (e) 
    {
        if (parseInt($("#numbFish").val(), 10) === "" || parseInt($("#numbFish").val(), 10) === 0 || isNaN(parseInt($("#numbFish").val(), 10))) 
        {
            alert("Enter The Number Of Species");
            e.preventDefault();
            return false;
        }



});

    $('#numbFish').change(function () {
        alert('Number of species: ' + $(this).val());
        if (parseInt($(this).val(), 10) > 0) {
            for (i = 0; i < $("#numbFish").val(); i++) {
                $('#' + numsp[i]).show();
            }
        }
    });

这应该只处理您的input事件。它并没有试图解决你的帖子评论中似乎堆积的其他问题。

Jquery .on或.change方法不起作用

2 个答案: