Question

我使用的JavaScript可以在第二页的一页中完美地运行，但是在第二页中却出现错误。我没有编写JavaScript并且无法更改它，所以请帮助我找出导致错误的原因。

我尝试移动调用JavaScript的代码行，但这无济于事。我在第一页和第二页之间进行了检查，但是看不到任何东西会使它停止工作。

在此处调用JavaScript：

<script type="text/javascript" src="<?php echo base_url(); ?>js/rating.min.js"></script>

JavaScript代码为：

!function(){
    "use strict";
    function t(t,i,n,e){
        function r(t,i){ 
            for(var n=0;n<t.length;n++){
                var e=t[n];i(e,n)
            }
        }
        function a(t){
           s(t),o(t),u(t)
        }
        function s(t){
           t.addEventListener("mouseover",function(i){
               r(f,function(i,n){
                   n<=parseInt(t.getAttribute("data-index"))?i.classList.add("is-active"):i.classList.remove("is-active")
               })
           })
        }
        function o(t){
           t.addEventListener("mouseout",function(t){
             -1===f.indexOf(t.relatedTarget)&&c(null,!1)
           })
        }
        function u(t){
            t.addEventListener("click",function(i){
               i.preventDefault(),c(parseInt(t.getAttribute("data-index"))+1,!0)
            })
        }
        function c(t,a){
            t&&0>t||t>n||(void 0===a&&(a=!0),i=t||i,r(f,function(t,n){
                i>n?t.classList.add("is-active"):t.classList.remove("is-active")
            }),e&&a&&e(d()))
        }
        function d(){
            return i
        }
        var f=[];
        return function(){
            if(!t)throw Error("No element supplied.");
            if(!n)throw Error("No max rating supplied.");
            if(i||(i=0),0>i||i>n)throw Error("Current rating is out of bounds.");
            for(var e=0;n>e;e++){
                var r=document.createElement("li");
                r.classList.add("c-rating__item"),r.setAttribute("data-index",e),i>e&&r.classList.add("is-active"),t.appendChild(r),f.push(r),a(r)
            }
        }(),{
           setRating:c,getRating:d
        }
     }
     window.rating=t}();

我遇到的错误是：'Uncaught TypeError: t.appendChild is not a function.

页面中的代码：

echo 'Please rate the quality of this transcript:<br/>';
echo '<div style="height: 44px; padding: 5px;text-align: center;">';
echo '<span id="qualitystars" style="vertical-align: sub;"><li class="c-rating__item" data-index="0"></li><li class="c-rating__item" data-index="1"></li><li class="c-rating__item" data-index="2"></li><li class="c-rating__item" data-index="3"></li><li class="c-rating__item" data-index="4"></li> </span>';
echo '</div><input type="hidden" name="quality" id="quality">';

原始页面没有进行<li>硬编码，但是由于某些原因，我不得不将其放入其中，否则它们将不会显示。也许这与我收到的错误有关？

应该出现的是5个星星的轮廓，当用户将鼠标悬停在星星上方时，该星星和从左上方一直指向该星星的那些应该是实心的。然后，用户可以单击星号以提交评级。现在，我看到了轮廓，但是当我悬停时，只有我悬停的星星才是实心的。

在此先感谢您的帮助。

编辑：这是我给评分的地方：

let q_curr = 1;
let q_el = $('qualitystars');
let q_cb_rating = function (rating) {
    $('quality').value = rating;
};
let q_rating = rating(q_el, q_curr, 5, q_cb_rating);

它正在调用JavaScript文件，即rating.min.js。

Answer 1

事实证明，第一页使用MooTools，第二页使用jQuery，两者无法协同工作。我正在使用jQuery重写第二页的功能。

感谢所有回复的人。

在不同页面上使用相同的JavaScript，为什么会出现错误？

1 个答案: