1

试图在 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 部分（函数 autohover），所以看起来好像是 Jquery 没有运行。

4

2 回答 2

0

弄清楚了。某种程度上来说。比实际解决源头问题更多的是消除症状。

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

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

感谢您的回答/评论！

于 2017-07-24T09:51:49.213 回答
0

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

于 2018-06-17T06:03:23.650 回答