Question

JavaScript的： -

var a=["a","b","c","d","e","f","g","h","i","j","k","l"];
var b=[];
var c=[];

for(var i=0;i<24;i++)
{
    var temp=String(Math.ceil(Math.random()*24));
    while(true)
    {
        var d=true;
        for(var j=0;j<b.length;j++)
        {
            if(b[j]==temp)
            {
                d=false;
            }
        }
        if(d==false)
        {
            temp=String(Math.ceil(Math.random()*24));
        }
        if(d==true)
        {
            break;
        }
    }
    b[b.length]=temp;
    if(i<12)
    {
        c[c.length]=a[i];
    }
    if(i>=12)
    {
        c[c.length]=a[i-12];
    }
}
console.log(b)
console.log("Break")
console.log(c)
for(var i=0;i<24;i++)
{
    document.getElementById(b[i]).addEventListener("mouseover",function()
        {this.classList.toggle(c[i]);}) 
}

CSS： -

.box
{
    height:100px;
    width:100px;
    border:2px solid black;
    margin-right:10px;
}
.a
{
    background:red; 
}
.b
{
    background:orange;  
}
.c
{
    background:purple;  
}
.d
{
    background:blue;    
}
.e
{
    background:black;   
}
.f
{
    background:green;   
}
.g
{
    background:yellow;  
}
.h
{
    background:pink;    
}

.i
{
    background:peru;    
}

.j
{
    background:saddlebrown; 
}

.k
{
    background:plum;    
}
.l
{
    background:lightsalmon; 
}

HTML： -

<!DOCTYPE html>
<html>
<head>
    <title>Color Game</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <link rel="stylesheet" type="text/css" href="prac3.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div id="1" class="col-lg-2 box thumbnail"></div>
        <div id="2" class="col-lg-2 box thumbnail"></div>
        <div id="3" class="col-lg-2 box thumbnail"></div>
        <div id="4" class="col-lg-2 box thumbnail"></div>
        <div id="5" class="col-lg-2 box thumbnail"></div>
        <div id="6" class="col-lg-2 box thumbnail"></div>
    </div>
    <div class="row">
        <div id="7" class="col-lg-2 box thumbnail"></div>
        <div id="8" class="col-lg-2 box thumbnail"></div>
        <div id="9" class="col-lg-2 box thumbnail"></div>
        <div id="10" class="col-lg-2 box thumbnail"></div>
        <div id="11" class="col-lg-2 box thumbnail"></div>
        <div id="12" class="col-lg-2 box thumbnail"></div>
    </div>
        <div class="row">
        <div id="13" class="col-lg-2 box thumbnail"></div>
        <div id="14" class="col-lg-2 box thumbnail"></div>
        <div id="15" class="col-lg-2 box thumbnail"></div>
        <div id="16" class="col-lg-2 box thumbnail"></div>
        <div id="17" class="col-lg-2 box thumbnail"></div>
        <div id="18" class="col-lg-2 box thumbnail"></div>
    </div>
        <div class="row">
        <div id="19" class="col-lg-2 box thumbnail"></div>
        <div id="20" class="col-lg-2 box thumbnail"></div>
        <div id="21" class="col-lg-2 box thumbnail"></div>
        <div id="22" class="col-lg-2 box thumbnail"></div>
        <div id="23" class="col-lg-2 box thumbnail"></div>
        <div id="24" class="col-lg-2 box thumbnail"></div>
    </div>
</div>
<script type="text/javascript" src="prac3.js"></script>
</body>
</html>

问题： - 每当我将鼠标悬停在元素上时，颜色都不会改变，无论是添加的类，还是未定义的＆＃34;在class属性中添加。我试图生成随机彩色的瓷砖，只有在鼠标悬停时才会显示随机颜色。我无法理解什么是错的，任何形式的帮助都会受到赞赏。

<div id="18" class="col-lg-2 box thumbnail"></div>
<div id="16" class="col-lg-2 box thumbnail undefined"></div>

使用classList.toggle（）和类名数组添加Class无效

0 个答案: