JavaScript 逻辑

Question

我刚刚修改了旧代码，现在似乎没有任何效果。请您指导我哪里出错了。

一些不起作用的事情是:

以前，焦点始终停留在屏幕上唯一的输入字段上。 (现在不行了)，代码中的 if else 条件也不起作用。 On keyup 功能也不起作用。

<script language="javascript">
    $(document).ready(function() {
        $("#serialNumber").focus();
        $("#scroll-pane").jScrollPane();
        $(document).keydown(function() {
            $("#serialNumber").focus();
        });
        var code = $("#hiddenSerialCode").val();

        $("#serialNumber").keyup(function() {
            var $this = $(this);
            var d = $(this).val();
            var d5 = d.substring(0, 5);

            if (d.length != 20) {
                alert('Incorrect Serial Code');
            }
            else if (d.length == 20 && d5 != code) {
                var serialCode = d.substring(0, 8);
                alert('Serial Code: ' + serialCode);
                $(this).val("");
            }
            else if (d.length == 20 && d5 == code) {
                var flagNumber = d.substring(0, 6);
                var errorNumber = d.substring(7, 10);
                alert('Flag Number ' + flagNumber + '\nError Number ' + errorNumber);
                $(this).val("");
            }
        });
    });
</script>

HTML 代码:--------------

<table>
  <tr>
    <td>
    <input type="text" id="serialNumber" class="" />
    <input type="hidden" id="hiddenSerialCode" value="01327"/>
    </td>
  </tr>
</table>

<div id="scroll-pane" class="scroll-pane">

旧工作代码:------

$(document).ready(function() {
    $("#serialCode").focus();
    $(document).keydown(function() {
        $("#serialCode").focus();
    });

    $("#serialCode").keyup(function(){
        var $this = $(this);
        var d = $(this).val();
        if (d.length >= 5){
            //$this.attr("disabled","disabled")
            var $code = d.substring(0,8) ;
            alert('code is ' + $code);

        }
    });
});

Answer 1

代码的主要问题是 $("#scroll-pane").jScrollPane(); 引用了未定义的方法。

如果您将该行从您的代码函数中取出。

因此，您必须确保包含 jScrollPane() plugin 代码中的某处。

如果您只想滚动到#scroll-pane，请使用 .animate() :

$('html,body').animate({
    scrollTop: $('#scroll-pane').offset().top},
    'slow');

此外，您的 if 语句可能应该是 if (d.length > 20) 否则每次按键时都会出现错误。您可以使用 .blur() 进行检查 for if (d.length != 20)。

此外，您可能需要检查 d.length 20 之前的有效序列号，因为序列号的长度看起来只有 9。

最后，作为注释，您将 $this 定义为 $(this)，但随后使用 $(this)。对于值，您可以简单地使用 this.value。

$(document).ready(function() {
    $("#serialNumber").focus();
    // $("#scroll-pane").jScrollPane(); - Include plugin if you want to use this.
    $(document).keydown(function() {
        $("#serialNumber").focus();
    });
    var code = $("#hiddenSerialCode").val();

    $("#serialNumber").keyup(function() {
        var $this = $(this);
        var d = $this.val();
        var d5 = d.substring(0, 5);

        if (d.length > 20) {
            alert('Incorrect Serial Code');
        }
                            // Should this really be 20? and not 9?
        else if (d.length == 20 && d5 != code) {
            var serialCode = d.substring(0, 8);
            alert('Serial Code: ' + serialCode);
            $this.val("");
        }                   // What about here?
        else if (d.length == 20 && d5 == code) {
            var flagNumber = d.substring(0, 6);
            var errorNumber = d.substring(7, 10);
            alert('Flag Number ' + flagNumber + '\nError Number ' + 
                   errorNumber);
            $this.val("");
        }
    });        
});

<强> jsFiddle example