如何将 div 中的图像替换为文本

Question

我对如何用 JS 编写脚本感到困惑，因此当用户单击图像时，它会转换/变成文本。

我在 div 中有一个 divs，因为我必须将它用于滚动动画。因此，当用户滚动到他们想要的图标时，他们可以单击它，它会变成文本，就像当我单击作业图标时，它会显示列出的作业。

我尝试使用“.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-        
 slotmachine@4.0.0/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-    
 slotmachine@4.0.0/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");
}
});

Answer 1

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>";

希望对您有所帮助！

如何将 div 中的图像替换为文本

How can you replace an image in a div to text

html

javascript

jquery

jquery-animate

anime.js