Question

尝试在Codepen上运行一个项目，由于某种原因，JS的某些部分没有运行，即使它确实在单独的笔中工作。

代码下方：

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部分（函数自动转换），所以它似乎是没有运行的Jquery。

Answer 1

想出来。某种程度上来说。比实际解决源问题更多的症状消失。

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

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

感谢您的回答/评论！

Answer 2

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

Jquery：没有在Codepen项目中运行

2 个答案: