Question

这是我的第一个问题的延续。当我在那里复制并粘贴代码时，我发现代码在JSfiddle中正常工作。

我花了好几个小时，当我在浏览器中从文本编辑器（我的计算机上的html文件）打开它时，我仍然无法弄清楚为什么完全相同的代码不起作用。

以下是JSfiddle链接：http://jsfiddle.net/MhmC7/

  var C = $("#a20 option");
  C.on('mouseenter', function () {
  var V = $(this).val();

$("#" + V).addClass("hover");
})

C.on('mouseleave', function () {
var V = $(this).val();

$("#" + V).removeClass("hover");
})

我确实将html文件链接到jquery库，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

我不知道问题是什么。非常感谢。

我被要求按顺序添加我的所有脚本标签，所以这里是：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">  </script>

   <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
   <script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>


   <!-- Include the DropDownCheckList supoprt -->
   <script type="text/javascript" src="ui.dropdownchecklist.js"></script>


    <!-- Apply dropdown check list to the selected items  -->
    <script type="text/javascript">
    $(document).ready(function() {
        $("#a1,#a2,#a3,#a4,#a6,#a5,#a7,#a8,#a9,#a20").dropdownchecklist( { icon: {placement: 'right', toOpen: 'ui-icon-arrowthick-1-s'
                                        , toClose: 'ui-icon-arrowthick-1-n' }
                                        , maxDropHeight: 200, width: 220
                                        , groupItemChecksWholeGroup: true
                                        , textFormatFunction: function(options) {
                                            var selectedOptions = options.filter(":selected");
                                            var countOfSelected = selectedOptions.size();
                                            var values = "";
                                            for (i=0; i< selectedOptions.size(); i++) {
                                                if (selectedOptions[i].text != "")
                                                                           values += selectedOptions[i].text; 
                                                                           values += "; ";
                                            }
                                            switch(countOfSelected) {
                                                case 0: return "<span style='color:red;font-weight:bold'>Everybody</span>";
                                                case 1: return selectedOptions.text();
                                                case options.size(): return "<span style='color:red;font-weight:bold'>Everybody</span>";
                                                default: return values;
                                            }
                                        }
                                        , onItemClick: function(checkbox, selector) {
                                            //alert("value " + checkbox.val() + ", is checked: " + checkbox.prop("checked"));
                                        }
                                  });
    });






     </script>

    then, the last one is the script with the function in question, appearing right  before the </body> end tage, like so:

    <script type="text/javascript">

    $(document).ready(function() {
    var C = jQuery("#a20 option");
    C.on('mouseenter', function(){

    var V = $(this).val();
    $("#"+V).addClass("hover");
    });

   C.on('mouseleave', function(){
  var V = $(this).val();
  $("#"+V).removeClass("hover");
   }); 

 });
</script>

Answer 1

以下是您应该检查的内容：

检查浏览器错误控制台或调试器控制台以查看报告的错误。如果有错误，他们可能会指出发生了什么。
您的jsFiddle已将脚本设置为运行onDomready（设置在jsFiddle的左侧）。如果您网页中的代码位于网页的<head>部分或HTML之前的<body>部分，则代码将在DOM元素出现之前过早运行，并且无法正常运行。
您的页面中的代码需要封装在<script>标记中，但这在jsFiddle中不是必需的，因为脚本部分中的代码会自动解释为jsFiddle中的脚本。
仔细检查您是否在页面中正确包含jQuery，并在尝试使用它之前将其包含在内。

进入调试控制台......

在Chrome中：右键单击页面中的元素，然后选择“检查元素”。在打开的窗口中，单击菜单/标签栏中的“控制台”一词。在调试控制台窗口中读取任何错误或警告。

在Firefox中：安装Firebug扩展或通过菜单打开Web控制台。安装Firebug扩展后，右键单击页面，然后单击Inspect Element with Firebug。单击“控制台”选项卡。然后，您可能需要点击浏览器页面的重新加载（现在打开Firebug窗口）以查看该页面的控制台错误。

在IE的最新版本中：打开页面，点击F12。打开窗口时，单击控制台选项卡。在IE11中，这是一个沿着窗口左侧的图形，看起来像一个带有＆gt;的矩形。提示它。在其他版本的IE中，访问控制台的UI是不同的。

这里的an article介绍了如何在这些浏览器和其他浏览器中访问错误控制台。如果您需要更多帮助，可通过Google搜索“浏览器错误控制台”获取大量其他信息。

jquery代码在JSfiddle中工作，但不在本地

1 个答案: