Question

我正在尝试完成这个项目，最后设法插入一个信息div，当点击其中一个专辑div时可以看到它。但是，代码不起作用。我尽我所能，这真的是抱着我。这是HTML：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="queendisco.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="queen.js"></script>
</head>
<body>
<div class="teste"></div>
<div class="discoestudio">
     <div class="linha">
        <div class="album" id="queenI"></div>
        <div class="album" id="queenII"><br></div>
        <div class="album" id="sha"><br></div>
        <div class="album2" id="theopera"><br></div>
        <div class="album2" id="theraces"><br></div>
    </div>  
    <div class="linha2">
        <div class="album" id="notw"><br></div>
        <div class="album" id="jazz"><br></div>
        <div class="album" id="thegame"><br></div>
        <div class="album2" id="flash"><br></div>
        <div class="album2" id="hotspace"><br></div>
    </div>
        <div class="linha3">
        <div class="album4" id="theworks"><br></div>
        <div class="album4" id="kindof"><br></div>
        <div class="album4" id="miracle"><br></div>
        <div class="album3" id="innuendo"><br></div>
        <div class="album3" id="madein"><br></div>
    </div>  
    </div>
    </body>
    </html>

然后是CSS

body {
    background: #000;
    width: 100%;
}
.discoestudio {
    width: 1080px;
    height: 640px;
    background: transparent;
    margin: 0 auto;
    margin-top: 50px;
    overflow: hidden;
    z-index: -4;
    }
.teste {
    width: 640px;
    height: 420px;
    background: #ff0000;
    overflow: hidden;
    position: absolute;
    left: 428px;
    z-index: 3;
    display: none;
    }
.album {
    width: 200px;
    height: 200px;
    transition: 0.5s;
    z-index: 0;
    }

.album:hover {
    transform: scale(2.1); 
    transform-origin: left top;
    z-index: 1;
    }

.album2 {
    width: 200px;
    height: 200px;
    transition: 0.5s;
    z-index: 0;
    }
.album2:hover {
    transform: scale(2.1); 
    transform-origin: right top;
    z-index: 1;
    }
.album3 {
    width: 200px;
    height: 200px;
    transition: 0.5s;
    z-index: 0;
    }
.album3:hover {
    transform: scale(2.1); 
    transform-origin: right bottom;
    transform-style: flat;
    z-index: 1;
    }
.album4 {
    width: 200px;
    height: 200px;
    transition: 0.5s;
    z-index: 0;
    }
.album4:hover {
    transform: scale(2.1); 
    transform-origin: left bottom;
    transform-style: flat;
    z-index: 1;
    }
.linha {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 200px;
    width: 100%;
    }
.linha2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 200px;
    width: 100%;
    margin-top: 20px;
    }
.linha3 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 200px;
    width: 100%;
    margin-top: 20px;
    }
#queenI {
    background: url(https://i.imgur.com/KU49O2S.jpg) no-repeat;
    background-size: contain;
    }

#queenII {
    background: url(https://i.imgur.com/mYirR51.jpg) no-repeat;
    background-size: contain;
}
#sha {
    background: url(https://i.imgur.com/Q72zBuk.jpg) no-repeat;
    background-size: contain;
}
#theopera {
    background: url(https://i.imgur.com/ot58zUZ.jpg) no-repeat;
    background-size: contain;
}
#theraces {
    background: url(https://i.imgur.com/RRBqAcV.jpg) no-repeat;
    background-size: contain;
}
#notw {
    background: url(https://i.imgur.com/Q4basfN.jpg) no-repeat;
    background-size: contain;
}
#jazz {
    background: url(https://i.imgur.com/VdhcaPL.jpg) no-repeat;
    background-size: contain;
}
#thegame {
    background: url(https://i.imgur.com/GACdUCy.jpg) no-repeat;
    background-size: contain;
}
#flash {
    background: url(https://i.imgur.com/PhHgSmw.jpg) no-repeat;
    background-size: contain;
}
#hotspace {
    background: url(https://i.imgur.com/j1HY5FV.jpg) no-repeat;
    background-size: contain;
}
#theworks {
    background: url(https://i.imgur.com/CFROuSj.jpg) no-repeat;
    background-size: contain;
}
#kindof {
    background: url(https://i.imgur.com/pVY63E5.jpg) no-repeat;
    background-size: contain;
}
#miracle {
    background: url(https://i.imgur.com/OiYAK1N.jpg) no-repeat;
    background-size: contain;
}
#innuendo {
    background: url(https://i.imgur.com/84TP2Cc.jpg) no-repeat;
    background-size: contain;
}
#madein {
    background: url(https://i.imgur.com/oyNI3u0.jpg) no-repeat;
    background-size: contain;
}

最后，JS

$('#theraces').click(function() {
    $('.teste').show();
});

有人可以帮助我吗？我真的被这部分困住了！：（

Answer 1

您将脚本放在页面顶部，它将在加载#theraces div之前运行。您应始终将处理程序包装在$(...)中，以便它们在DOM准备就绪后运行，即

$(function() {
  $('#theraces').click(function() {
    $('.teste').show();
  });
});

是$(document).ready(...)的缩写。

Answer 2

Yous应该添加

<script type="text/javascript" src="queen.js"></script>

加载完整的身体后。

因此，在正文结束标记

之前添加脚本

我用来打开和关闭div的JQuery代码不起作用

2 个答案: