Javascript 如何将div中的图像替换为文本_Javascript_Jquery_Html_Jquery Animate_Anime.js

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

javascript jquery html

Javascript 如何将div中的图像替换为文本,javascript,jquery,html,jquery-animate,anime.js,Javascript,Jquery,Html,Jquery Animate,Anime.js,我一直在思考如何用JS编写脚本，因此当用户单击图像时，它会转换/变成文本我在一个div中有一个div，因为我必须将它用于滚动动画。因此，当用户滚动到他们想要的图标时，他们可以单击它，它会变成文本，就像我单击作业图标时，它会显示列出的作业我尝试使用“.innerHTML=”Hello World“”，但失败了 HTML: <!DOCTYPE html> <html lang="en"> <head> <title>Underscores</

我一直在思考如何用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-        
 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>

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


强调

JS:

<!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>

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

document.body.style.overflow=“hidden”；
//上下键的按键笔划
//设置我们的容器
const el=document.querySelector（“中间”）；
//创建新的SlotMachine
const slot=新SlotMachine（el，{}）；
document.onkeydown=checkKey；
功能检查键（e）{
e=e | | window.event；
//密码：EADWEARD
动画({
目标：“右分区”，
translateX：{
价值：200，
持续时间：500
}
});
动画({
目标：“左分区”，
translateX：{
值：-200，
持续时间：500
}
});
如果（例如，keyCode==“40”）{
//这是下来的
//这将打开它
slot.prev（）；
}否则，如果（例如，keyCode==“38”）{
slot.next（）；
}
}
//滚动检测在这里发生，没有滚动条
$（“html”）。在（“鼠标滚轮”上，函数（e）{
动画({
目标：“右分区”，
translateX：{
价值：200，
持续时间：500
}
});
动画({
目标：“左分区”，
translateX：{
值：-200，
持续时间：500
}
});
var delta=e.originalEvent.wheelDelta；
if（δ<0）{
//这是用于向下滚动的
//动画打开了制动器
slot.prev（）；
}如果（增量>0）{
slot.next（）；
}
});
//这是用于检测中间div中的div的点击。
//1=第二个图像，2=第三个图像
$（“.middle div”）。单击（函数（）{
if（$（this）.index（）=='1'）{
//变化发生在这里
控制台日志（“该死的”）；
document.getElementById（“aboutID”）.innerHTML=“Hello World”；
}如果（$（this.index（）='2'）{
//变化发生在这里
控制台日志（“作业页面”）；
}
});

innerHTML

是HTML元素的属性，可用于获取DOM指定id内的内容。所以，如果我们想更改image，那么在div标记上应用相同的设置

为包含要更改的图像的div标记提供id

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

document.getElementById（“changetotext”）.innerHTML=“Hello World”；

希望这有帮助

您正试图更改

img

元素（id

aboutID

）的

innerHTML

属性。我相信您想将文本放在

div

中。@DontVoteMeDown但这不会替换图像，对吗？