Question

JS 轮播 - 未捕获的语法错误：意外的标识符

2017-10-05

1481

javascript jquery html css

我收到此代码的错误（' 未捕获的语法错误：意外的标识符' -- index.html:1 ）：

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="code.js"></script>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
        <header>
            <div class="bgImg0" id="header">
                <div id="carousel-dots" class="bg-dark txt-center">
                    <div class="dot bg-base-color pointer fast-tr" id="selected_dot"></div>
                    <div class="dot bg-base-color pointer fast-tr"></div>
                    <div class="dot bg-base-color pointer fast-tr"></div>
                    <div class="dot bg-base-color pointer fast-tr"></div>
                    <div class="dot bg-base-color pointer fast-tr"></div>
                </div>
            </div>
        </header>
    </body>
</html>

CSS

:root {
    --main-color1: #CCA43B;
    --base-color: dodgerblue;
    --dark: #363636;
    --slow-tr: all 0.5s linear;
}
html, body, header {
    width: 500px;
    height: 500px;
}
#header {
    width: 500px;
    height: 200px;
    background-color: var(--dark);
}
#header::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    z-index: -1;  
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
    -webkit-transition: var(--slow-tr);
    -moz-transition: var(--slow-tr);
    -ms-transition: var(--slow-tr);
    -o-transition: var(--slow-tr);
    transition: var(--slow-tr);
}
#carousel-dots {
    height: 30px;
}
.dot {
    margin: 0 5px;
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    opacity: 0.4;
}
.dot:hover {
    opacity: 1;
    background-color: var(--main-color1);
}
#selected_dot {
    opacity: 1;
}
#header.bgImg0::before {
    background-color: red;
}
#header.bgImg1::before {
    background-color: orange;
}
#header.bgImg2::before {
    background-color: green;
}
#header.bgImg3::before {
    background-color: purple;
}
#header.bgImg4::before {
    background-color: yellowgreen;
}
.bg-base-color {
    background-color: var(--base-color);
}
.pointer {
    cursor: pointer;
}
.txt-center {
    text-align: center;
}

JS

var header_element;
var selected_dot;
var headerCarousel_flag = {
    value: 0
};
$(document).ready(function(){
    header_element = document.getElementById("header");
    selected_dot = document.getElementsByClassName("dot");
    var j = 0;
    for(; j < 5 ; j++){
        selected_dot[j].setAttribute("onclick", "next('header', " + headerCarousel_flag + ", 'bgImg')");
    }
    Carousel(header_element, headerCarousel_flag, 'bgImg');
});
function Carousel(element, flag, class_name){
    var element_id = $(element).attr('id');
    if(flag.value == 0){
        next(element_id, flag, class_name);
    }
    else if(flag.value == 1){
        next(element_id, flag, class_name);
    }
    else if(flag.value == 2){
        next(element_id, flag, class_name);
    }
    else if(flag.value == 3){
        next(element_id, flag, class_name);
    }
    else {
        next(element_id, flag, class_name);
    }
    setTimeout(function(){
        Carousel(element, flag, class_name);
    }, 3000);
}
function next(element_id, flag, class_name){
    var element_obj = document.getElementById(element_id);
    element_obj.className = class_name + flag.value;
    resetIDs();
    selected_dot[flag.value].id = "selected_dot";
    flag.value++;
    if(flag.value == 5) flag.value = 0; 
}
function resetIDs(){
    var i = 0;
    for(; i < 5; i++){
        selected_dot[i].id = "";
    }
}

抱歉粘贴了一大段代码，但此时我真的不确定哪里出了问题。

问题是，我正在制作一种可以改变背景颜色的轮播，它应该在 3 秒后改变（就像现在这样），而且当用户点击代表点的 div 时也会改变。当我点击它时，我收到错误并且什么也没发生，它每 3 秒继续改变一次。所以我想我可能传递了错误的参数（虽然我认为那时我会收到不同的错误消息）。有没有哪位高眼力的人能看出我错过了什么？

Answer 1

您将字符串作为参数传递，而您的代码需要一个函数

selected_dot[j].setAttribute("onclick", "next('header', " + headerCarousel_flag + ", 'bgImg')");

是罪魁祸首

selected_dot[j].addEventListener('click', function() {
      next('header', headerCarousel_flag, 'bgImg');
})

应该修复它。

此代码并未执行您想要的操作，但它确实解决了您当前的错误。