Question

我写了一个星级评分表，用krajee插件计算所有星列的平均数。虽然我这里有一点错误。jsfiddle中的一切都很好用但是在docs中没有用。有一个片段的bug.When我使用local star-rating.js文件，函数ww()不起作用。当我在jsfiddle <script src="https://rawgit.com/kartik-v/bootstrap-star-rating/v3.5.4/js/star-rating.js"></script>中使用cdn时，除了 stars之外的所有工作都没有显示。请帮我看看进行。

  $("#question1").rating({
    glyphicon: true,
    stars:10,
    min: 0,
    max: 10,
    step: 0.5,
    showClear: true,
    size: 'xs',
    starCaptions: {
      1: 'Irrelevant',
      2: 'It Matters',
      3: 'Important',
      4: 'Very Important',
      5: 'Mandatory'
    },
    starCaptionClasses: {
      1: 'label label-info',
      2: 'label label-primary',
      3: 'label label-success',
      4: 'label label-warning',
      5: 'label label-danger'
    }
  });

$('#question1').on('rating.change', function(event, value) {
ww();
});


  $("#question3").rating({
    glyphicon: true,
    stars: 10,
    min: 0,
    max: 10,
    step: 0.5,
    showClear: true,
    size: 'xs',
    starCaptions: {
      1: 'Irrelevant',
      2: 'It Matters',
      3: 'Important',
      4: 'Very Important',
      5: 'Mandatory'
    },
    starCaptionClasses: {
      1: 'label label-info',
      2: 'label label-primary',
      3: 'label label-success',
      4: 'label label-warning',
      5: 'label label-danger'
    }
  });


$('#question3').on('rating.change', function(event, value) {
ww();
});


  $("#question2").rating({
    glyphicon: true,
    stars: 10,
    min: 0,
    max:10,
    step: 0.5,
    showClear: true,
    size: 'xs',
    starCaptions: {
      1: 'Irrelevant',
      2: 'It Matters',
      3: 'Important',
      4: 'Very Important',
      5: 'Mandatory'
    },
    starCaptionClasses: {
      1: 'label label-info',
      2: 'label label-primary',
      3: 'label label-success',
      4: 'label label-warning',
      5: 'label label-danger'
    }
  });


$('#question2').on('rating.change', function(event, value) {
ww();
});


  $("#question4").rating({
    glyphicon: true,
    stars: 10,
    min: 0,
    max: 10,
    step: 0.5,
    showClear: true,
    size: 'xs',
    starCaptions: {
      1: 'Irrelevant',
      2: 'It Matters',
      3: 'Important',
      4: 'Very Important',
      5: 'Mandatory'
    },
    starCaptionClasses: {
      1: 'label label-info',
      2: 'label label-primary',
      3: 'label label-success',
      4: 'label label-warning',
      5: 'label label-danger'
    }
  });

$('#question4').on('rating.change', function(event, value) {
ww();
});

/*!
 * @copyright &copy; Kartik Visweswaran, Krajee.com, 2013 - 2015
 * @version 3.5.4
 *
 * A simple yet powerful JQuery star rating plugin that allows rendering
 * fractional star ratings and supports Right to Left (RTL) input.
 *
 * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com
 * For more Yii related demos visit http://demos.krajee.com
 */
.rating-loading {
    width: 25px;
    height: 25px;
    font-size: 0px;
    color: #fff;
    background: transparent url('../img/loading.gif') top left no-repeat;
    border: none;
}
/*
 * Stars
 */
.rating-fa {
    font-family: 'FontAwesome';
    padding-left: 1px;
}

.rating-fa .rating-stars:before {
    padding-left: 1px;
}

.rating-gly {
    font-family: 'Glyphicons Halflings';
}

.rating-gly-star {
    font-family: 'Glyphicons Halflings';
    padding-left: 2px;
}

.rating-gly-star .rating-stars:before {
    padding-left: 2px;
}

.rating-lg .rating-gly-star, .rating-lg .rating-gly-star .rating-stars:before {
    padding-left: 4px;
}

.rating-xl .rating-gly-star, .rating-xl .rating-gly-star .rating-stars:before {
    padding-left: 2px;
}

.rating-active {
    cursor: default;
}

.rating-disabled {
    cursor: not-allowed;
}

.rating-uni {
    font-size: 1.2em;
    margin-top: -5px;
}

.rating-container {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    color: #e3e3e3;
    overflow: hidden;
}

.rating-container:before {
    content: attr(data-content);
}

.rating-container .rating-stars {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    overflow: hidden;
    color: #fde16d;
    transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
}

.rating-container .rating-stars:before {
    content: attr(data-content);
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}

.rating-container-rtl {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    color: #fde16d;
}

.rating-container-rtl:before {
    content: attr(data-content);
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}

.rating-container-rtl .rating-stars {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    overflow: hidden;
    color: #e3e3e3;
    transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
}

.rating-container-rtl .rating-stars:before {
    content: attr(data-content);
}

/**
 * Rating sizes
 */
.rating-xl {
    font-size: 4.89em;
}

.rating-lg {
    font-size: 3.91em;
}

.rating-md {
    font-size: 3.13em;
}

.rating-sm {
    font-size: 2.5em;
}

.rating-xs {
    font-size: 2em;
}

/**
 * Clear rating button
 */
.star-rating .clear-rating, .star-rating-rtl .clear-rating {
    color: #aaa;
    cursor: not-allowed;
    display: inline-block;
    vertical-align: middle;
    font-size: 60%;
}

.clear-rating-active {
    cursor: pointer !important;
}

.clear-rating-active:hover {
    color: #843534;
}

.star-rating .clear-rating {
    padding-right: 5px;
}

/**
 * Caption
 */
.star-rating .caption, .star-rating-rtl .caption {
    color: #999;
    display: inline-block;
    vertical-align: middle;
    font-size: 55%;
}

.star-rating .caption {
    padding-left: 5px;
}

.star-rating-rtl .caption {
    padding-right: 5px;
}

/**
 * Print
 */
@media print {
    .rating-container, .rating-container:before , .rating-container-rtl .rating-stars, .rating-container-rtl .rating-stars:before {
        color: #f3f3f3!important;
    }
    
    .star-rating .clear-rating, .star-rating-rtl .clear-rating {
        display: none;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<link href="https://rawgit.com/kartik-v/bootstrap-star-rating/v3.5.4/css/star-rating.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kartik-v/bootstrap-star-rating/v3.5.4/js/star-rating.js"></script>


<form id="fld">
  <input id="question1" class="rating rating-loading">
  <input id="question2">
  <input id="question3">
  <input id="question4">
</form>
<div class="entirety">
  <p class="amount">Общая оценка
    <p id='d'>0</p>
</div>

<script>
  function ww() {
    var oi = document.getElementById('fld').getElementsByTagName('input');

    var val = 0

    for (var i = 0; i < oi.length; i++) {

      val += +oi[i].value;
    };
    val = val / oi.length;
    document.getElementById('d').textContent = val;
  }
</script>

Answer 1

当我在当地工作时，我会快速查看您的代码。

这就是为什么你不能在这个localhost网站上获得明星的原因

1）HTML文件中没有正文和头部。 2）没有元标记 3）在CSS文件中缺少斜杠/以及你写的rel样式表，作为第一行没有斜杠/在结尾，但你确实把它放在第二行。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://rawgit.com/kartik-v/bootstrap-star-rating/v3.5.4/css/star-rating.css" />

这是我在HTML中编写的代码

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="https://rawgit.com/kartik-v/bootstrap-star-rating/v3.5.4/css/star-rating.css" rel="stylesheet"/> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://rawgit.com/kartik-v/bootstrap-star-rating/v3.5.4/js/star-rating.js"></script>

</head>

<body>
  <form id="fld">
   <input id="question1" class="rating rating-loading">
   <input id="question2" class="rating rating-loading">
   <input id="question3" class="rating rating-loading">
   <input id="question4" class="rating rating-loading">
</form>
<div class="entirety">
  <p class="amount">Rate it 
    <p id='d'>0</p>
</div>
</body>


<script>
  function ww() {
    var oi = document.getElementById('fld').getElementsByTagName('input');

    var val = 0

    for (var i = 0; i < oi.length; i++) {

      val += +oi[i].value;
    };
    val = val / oi.length;
    document.getElementById('d').textContent = val;
  }
</script>

我希望它会帮助你并解决这个问题，你的JS和CSS都很好。只是对头标记的错误。

如何将星级评级插件插入html文档

1 个答案: