我坚持如何在JS中编写脚本，因此当用户点击图像时，它会转换/变成文本。
我有div中的div，因为我必须使用它来滚动动画。因此，当用户滚动到他们想要的图标时，他们可以单击它并且它将变成文本，就像当我单击作业图标时它显示列出的作业。
我尝试使用“.innerHTML =”Hello World“”尽管失败了。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Underscores</title>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/jquery-
[email protected]/dist/jquery.slotmachine.min.css"></style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div id= "left" class="left">
<img src="https://s3.amazonaws.com/underscores.xyz/images/left.png" alt="">
</div>
<div class="middle" id = "theMiddle" style="width: 400px; height: 300px">
<div><img
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/About.png"
alt="" class="about" id="aboutID"></div>
<div><img
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/job.png" alt=""
></div>
<div><img
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/middle.png"
alt=""></div>
</div>
<div id= "right" class="right">
<img src="https://s3.amazonaws.com/underscores.xyz/images/right.png"
alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery-
[email protected]/dist/slotmachine.min.js"></script>
<script src="back.js" charset="utf-8"></script>
</body>
</html>
JS：
document.body.style.overflow = "hidden";
//the key strokes for the up and down keys
// Set up our container
const el = document.querySelector("#theMiddle");
// Create new SlotMachine
const slot = new SlotMachine(el, {});
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
//Secret Code: EADWEARD
anime({
targets: "div.right",
translateX: {
value: 200,
duration: 500
}
});
anime({
targets: "div.left",
translateX: {
value: -200,
duration: 500
}
});
if (e.keyCode == "40") {
//this is down
//this will open it up
slot.prev();
} else if (e.keyCode == "38") {
slot.next();
}
}
//Scroll detection occurs here, without the scrollbar
$("html").on("mousewheel", function(e) {
anime({
targets: "div.right",
translateX: {
value: 200,
duration: 500
}
});
anime({
targets: "div.left",
translateX: {
value: -200,
duration: 500
}
});
var delta = e.originalEvent.wheelDelta;
if (delta < 0) {
//This is for the scrolling down
// animation opens up the brakets
slot.prev();
}if (delta > 0) {
slot.next();
}
});
//this is for detecting clicks for the divs in the middle div
// 1 = the 2nd image , 2 = the 3rd image
$(".middle div").click(function(){
if($(this).index() == '1'){
// The change occurs here
console.log("the fucks");
document.getElementById("aboutID").innerHTML = "Hello World";
}if($(this).index() == '2'){
// The change occurs here
console.log("jobs page");
}
});
innerHTML是HTML元素的属性，可用于获取DOM的指定id内的内容。因此，如果我们想要更改图像，则在div标签上应用相同的内容。
将id添加到包含要更改的图像的div标签。
<div id="changetotext"><img src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/About.png" alt="" class="about" id="aboutID"></div>
在js中将id更改为div标签的id。
document.getElementById("changetotext").innerHTML = "<p>Hello World</p>";
希望这可以帮助！