无法让在 JSFiddle 上工作的代码脱机工作答案

【问题标题】：Cannot get code which works on JSFiddle to work offline无法让在 JSFiddle 上工作的代码脱机工作
【发布时间】：2019-08-04 15:25:44
【问题描述】：

我找到了一个 JS Fiddle 帖子 (http://jsfiddle.net/luk3a/4cj7a5zx/)，它几乎完全符合我想要做的代码。我已经复制了离线实践的代码，我在 Safari 中本地运行代码，我从未使用过 JQuery，并且无法让代码在 JS Fiddle 环境之外运行。目的是获取一个输入并将其与一个数组进行比较，然后数组判断输入是否出现在数组中。输入框出现在 safari 中，但是当我单击“检查”时没有任何反应。

我尝试将脚本放在单独的 node.js 文件中，我还尝试了针对不同版本的 JQ 的不同 CDN 选项，以及将整个包下载到我的机器并将其与文件路径链接。

<!DOCTYPE html>
<html>
<head>

  <script
    type="text/javascript"
    src="//code.jquery.com/jquery-1.7.1.js"

  ></script>

  <script type="text/javascript">

$(window).load(function(){

$(document).ready(function() {
  var names = ['vadim', 'thomas', 'tanya', 'timur', 'eve', 'kate', 'karen', 
'peter'];

  $('#check').click(function() {
    var name = $('#name').val();
    if (jQuery.inArray(name, names) != '-1') {
      alert(name + ' is in the array!');
    } else {
      alert(name + ' is NOT in the array...');
    }
  });
});

  </script>

</head>
<body>
    <input id="name" type="text">
<input id="check" type="button" value="Check">

  </script>
</body>
</html>

当我按“检查”时没有任何反应。我不是程序员，我只是想在一个 Wix 站点中为一个简单的项目实现它。

【问题讨论】：

如果你在本地测试，浏览器中的url地址栏中是否有http://或file:///？
删除$(window).load(function(){这一行。你从来没有为它关闭大括号，因此有语法错误，但也不需要它。注意：使用浏览器开发工具控制台 (F12) 检查抛出的错误
jQuery 1.7.1 非常老旧。
感谢所有解释无用线路的人，现在一切正常:)

标签： javascript jquery html arrays

【解决方案1】：

试试这个。我已经删除了这一行 $(window).load(function(){ 。你忘了合上大括号

<!DOCTYPE html>
<html>
<head>
 </head>

<body>
    <input id="name" type="text">
    <input id="check" type="button" value="Check">
 <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script type="text/javascript">


$(document).ready(function() {
  var names = ['vadim', 'thomas', 'tanya', 'timur', 'eve', 'kate', 'karen', 
'peter'];

  $('#check').click(function() {
    var name = $('#name').val();
    if (jQuery.inArray(name, names) != '-1') {
      alert(name + ' is in the array!');
    } else {
      alert(name + ' is NOT in the array...');
    }
  });
});

  </script>

</body>
</html>

【讨论】：

【解决方案2】：

你忘记关闭了：

$(window).load(function(){
   //your code
});

供您参考：

$(document).ready(function(e) { 
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
});

$(document).load(function(e) { 
    //when html page complete loaded
    console.log("completely loaded"); 
});

【讨论】：

不需要，为什么要关闭它而不只是删除它
我相信他可以同时使用这两者： $(document).ready(function(e) { // 当 HTML-Document 被加载并且 DOM 准备好时执行 console.log("页面正在加载"); }); $(document).load(function(e) { //html页面加载完成时 console.log("completely loaded"); });
将两者用于同一个代码块绝对没有意义。 .load() 也已弃用
我更新了我的答案以解释 $(window).load 和 $(document).load 之间的区别
好的，但是您正在记录一个已弃用的方法。请记住，这里的答案不仅适用于提问的人，也适用于未来的读者