Question

我在jsfiddle工作的评级系统： https://jsfiddle.net/hp2L1ntd/

我创建了html文件，其中包含来自jsfiddle的所有组件。但是，当我在浏览器中尝试它时，它无法正常工作。

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <style>
    body {
     font-family: Verdana;
    }
    h1, h2, h3 {
     color: darkblue;
    }
    .rating-circle {
     height: 2em;
     width: 2em;
     border: .1em solid black;
     border-radius: 1.1em;
     display: inline-block;
     margin: 0;
     padding: .1em;
    }

    .rating-hover {
     background-color: yellow;
    }

    .rating-chosen {
     background-color: green;
    }
 </style>
</head>
<body>
 <h1>Contoso Web Developer Conference</h1>
 <h2>Finding elements using jQuery</h2>
 <div>This session is about identifying elements using jQuery methods and selectors.</div>
 <h3>Rate this session</h3>
 <div id="rating-container">
    <div class="rating-circle"></div>
    <div class="rating-circle"></div>
    <div class="rating-circle"></div>
    <div class="rating-circle"></div>
    <div class="rating-circle"></div>
 </div>

 <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>

 <script>
 $(document).ready(function() {
    $('.rating-circle').mouseenter(function() {
        $(this).prevAll().addBack().addClass('rating-hover');
    });

    $('.rating-circle').mouseleave(function() {
        $(this).prevAll().addBack().removeClass('rating-hover');
    });

    $('.rating-circle').click(function() {
        $(this).prevAll().addBack().addClass('rating-chosen'); 
    });

    $('#rating-container').mouseenter(function() {
        $(this).children().removeClass('rating-chosen');
    });
 });

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

Answer 1

默认情况下，您的浏览器正在寻找指向html文件的相对链接

file://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js

您需要将其设为绝对

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>

jsfiddle代码无法在浏览器

1 个答案: