Question

我在页面的$(document).ready(function(){部分使用了多个功能。

旧功能（下面突出显示）工作正常，直到我添加新功能（在顶部添加）。从那时起他们就不再工作了。经过一些测试后，我意识到如果我在旧功能和新功能之间切换位置，只有位于顶部的功能才能正常工作。

我在不同的页面上使用新功能而不是旧功能，但它们都包含在我的javascript文件和页脚中。

home.js：

$(document).ready(function(){

// NEW FUNCTION (up/down arrows)
        var nextListitem;
        var noOfListItems = $("#select > option").length-1;
        var curListItem = $("#select")[0].selectedIndex;
        $("#upArrow").on("click", function(){
             // Decrement the selection by one, unless that will be less than zero, then go to the last option
            nextListitem = (curListItem-1 < 0) ? noOfListItems : curListItem-1;
            curListItem = nextListitem;
            $("#select")[0].selectedIndex = nextListitem;
        });


    // OLD FUNCTIONS (count characters left in textarea)
    window.com_domain = window.com_domain || {};
    $(':text,#resort_description').click(function(){
        current_input_val = $(this).val();
        $(this).select();
    }).focusout(function(){
        if ($(this).val() == '') {
            $(this).val(current_input_val);
        }
    });
    // more old functions


});

TypeError：$（...）[0]未定义

var curListItem = $（＆＃34; #select＆＃34;）[0] .selectedIndex;

如果我使用＆＃34;旧功能＆＃34;

加载页面，则会显示

这就是我的页脚的样子（之前调用Jquery）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
  <script src="js/bootstrap-hover-dropdown.min.js'>"></script>
<script src="js/home.js" type="text/javascript"></script>

Answer 1

如果页面上没有id="select"的元素，$("#select")将是一个空集合，因此$("#select")[0]将是未定义的。您无法访问undefined.selectedIndex，因此您在该行收到错误，并且在运行后没有任何内容。它与就绪块中的多个函数无关。

您应该先检查元素是否存在。

if ($("#select").length > 0) {
    var nextListitem;
    var noOfListItems = $("#select > option").length-1;
    var curListItem = $("#select")[0].selectedIndex;
    $("#upArrow").on("click", function(){
         // Decrement the selection by one, unless that will be less than zero, then go to the last option
        nextListitem = (curListItem-1 < 0) ? noOfListItems : curListItem-1;
        curListItem = nextListitem;
        $("#select")[0].selectedIndex = nextListitem;
    });
}

Answer 2

首先，我认为您对导入bootstarp缩小的js文件有误解

script src="js/bootstrap-hover-dropdown.min.js"></script>

$（document）中的多个javascript函数.ready not working

2 个答案: