Jquery：未在 Codepen 项目中运行答案

【问题标题】：Jquery: Not running in Codepen projectJquery：未在 Codepen 项目中运行
【发布时间】：2017-07-24 09:02:51
【问题描述】：

试图在 Codepen 上运行一个项目，但由于某种原因，部分 JS 没有运行，即使它确实在单个 pen 中运行。

代码下方：

HTML 头部

<head>
  <link rel="stylesheet" href="css/style.css" type="text/css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript" src="./js/script.js"></script>
</head>

JS/Jquery

$( ".box-2,  .box-4").hover(
  function() {
    $('.row div').removeClass( "active" );
    $(this).addClass( "active" );
  }, function() {
    $(this).removeClass( "active" );
  }
);

window.setInterval(autohover, 3500);

  function autohover(){
    var numberg = Math.floor(Math.random() * 7) + 1;

    switch(numberg) {
      case 1:
        $('.row div').removeClass( "active" );
        $('#programming').addClass( "active" );
        break;
      case 2:
        $('.row div').removeClass( "active" );
        $('#design').addClass( "active" );
        break;
      case 3:
        $('.row div').removeClass( "active" );
        $('#healthfitness').addClass( "active" );
        break;
      case 4:
        $('.row div').removeClass( "active" );
        $('#astronomy').addClass( "active" );
        break;
      case 5:
        $('.row div').removeClass( "active" );
        $('#languages').addClass( "active" );
        break;
      case 6:
        $('.row div').removeClass( "active" );
        $('#photography').addClass( "active" );
        break;
      case 7:
        $('.row div').removeClass( "active" );
        $('#business').addClass( "active" );
        break;
      default:
      }
  }

$('.gotocoursesearch').on('click', function () {

            var scrto = $(".second").offset().top ;
                $('html, body').animate({
                scrollTop: scrto
                }, 1500);
        });

$('.questions button').on('click', function() {
  $(this).siblings('button').removeClass('activetwo');
  $(this).addClass('activetwo');
});

唯一正在运行的部分是 JS 部分（函数 autohover），所以看起来好像是 Jquery 没有运行。

【问题讨论】：

我希望你已经在 javascript required classes 下拉列表中添加了 jquery
请通过下拉菜单选择jquery
我想我不明白你通过下拉菜单的意思。你能详细说明一下吗？我已将 jquery 添加到头部以及它需要运行的脚本。我应该做更多吗？ @OmSao 和杰芬
@ValentijnvandenHout：有一个选项可以选择您想要在代码中使用的库。您可以从该下拉列表中选择 jquery。
@OmSao 啊，是的，我知道你的意思，但这只是在 Codepen 笔中。不在项目中。在 Project 中，我相信您只能通过源代码添加 jquery。外部来源选项卡只允许链接复制，不能即时集成。

标签： javascript jquery html codepen

【解决方案1】：

想通了。某种程度上来说。比实际解决根源问题更多的是消除症状。

不知何故，Jquery 没有加载。我将脚本代码直接放入使它工作的 HTML 代码中（浏览器 Jquery 加载工作）。

但是，我仍然不知道为什么外部脚本没有正确加载。

感谢您的回答/cmets！

【讨论】：

【解决方案2】：

那是因为您从不同的域加载 jQuery 并尝试在 iFrame 中运行它（您的 codepen 实时预览实际上是在 iframe 中加载的）并且在 iFrame 中加载外部脚本违反了一些安全措施。 Understanding Cross-Domain issue in Iframes

【讨论】：