堆栈内存溢出
  简体   繁体   English

减少 h1 标签中的一个值

[英]Decrement a value in h1 tag

 原文  2020-11-03 01:48:20  9   3    javascript/ decrement

问题描述

So, in my code, there are currently 50 photos shown, but however, each time I click on the photo, it will fade out, which the number of photos should decrement.所以，在我的代码中，目前显示了 50 张照片，但是，每次我点击照片时，它都会淡出，照片数量应该减少。

My h1 tag shows There are 50 photo(s) being shown , but everything my photo fades out, this tag should update itself and decrement the number.我的 h1 标签显示There are 50 photo(s) being shown ，但我的照片所有内容都淡出，此标签应自行更新并减少数量。 I'm having trouble with implementing this as a code.我无法将其作为代码实现。

Can anyone help me with this implementation, in terms of actual coding?就实际编码而言，任何人都可以帮助我完成此实现吗？ It would mean a lot if you can!如果可以，那将意味着很多！ 

 let pictures = document.getElementById("container"); let itemCount = document.getElementById("item-count"); let APIURL = "https://jsonplaceholder.typicode.com/albums/2/photos"; function fadeOut(event) { let fadeTarget = event.target; let fadeEffect = setInterval(function() { if (!fadeTarget.style.opacity) { fadeTarget.style.opacity = 1; } if (fadeTarget.style.opacity > 0) { fadeTarget.style.opacity -= 0.1; } else { clearInterval(fadeEffect); } }, 200); } document.getElementById("container").addEventListener("click", fadeOut); function addImage(url) { const img = document.createElement("img"); img.src = url; pictures.appendChild(img); } function displayTitle(title) { const photoTitle = document.createElement("p"); photoTitle.innerText = title; pictures.appendChild(photoTitle); } axios.get(APIURL).then(function(res) { const length = res.data.length; console.log(res.data); res.data.map(function(albums) { addImage(albums.thumbnailUrl); displayTitle(albums.title); itemCount.innerHTML = `There are ${length} photo(s) being shown`; }); });
 .grid-container { display: grid; grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; grid-auto-columns: 1fr; gap: 0.25rem; margin: 4px; margin-top: 10rem; width: 100%; height: 20px; position: relative; } .grid-container p { /* position: absolute; */ display: flex; font-weight: bold; font-size: 12px; margin-left: -11rem; align-self: flex-end; color: #fff; } .grid-container img { height: 300px; } .item-title { position: absolute; align-self: center; margin-top: -10rem; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="../css/index.css" /> <link rel="stylesheet" type="text/css" href="../css/signup.css" /> <link rel="stylesheet" type="text/css" href="../css/home.css" /> <script defer src="../js/homeScript.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <title>Document</title> </head> <body> <div class="container"> <div class="item-title"> <h1 id="item-count"></h1> </div> <div class="grid-container" id="container"></div> </div> </body> </html>

3 个解决方案

解决方案1
 2  2020-11-03 01:53:52

  • To show the decreased item count whenever clicking the image, it is needed to store the item count that is not hidden as variable .要在单击图像时显示减少的项目数，需要将未隐藏的项目数存储为variable 。

Here, I have stored the iamges that is not hidden in itemCount variable and whenever the user click the image so it is totally faded out, decreased the item count and update h1 tag as follows after clearInterval is called.在这里，我存储了未隐藏在itemCount变量中的图像，并且每当用户单击图像以使其完全淡出时，在调用clearInterval后如下减少项目计数并更新 h1 标签。

document.getElementById("item-count").innerHTML = `There are ${itemCount} photo(s) being shown`;


 let pictures = document.getElementById("container"); let itemCount = 50; let APIURL = "https://jsonplaceholder.typicode.com/albums/2/photos"; function fadeOut(event) { let fadeTarget =event.target; let fadeEffect = setInterval(function () { if (!fadeTarget.style.opacity) { fadeTarget.style.opacity = 1; } if (fadeTarget.style.opacity > 0) { fadeTarget.style.opacity -= 0.1; } else { clearInterval(fadeEffect); itemCount --; document.getElementById("item-count").innerHTML = `There are ${itemCount} photo(s) being shown`; } }, 200); } document.getElementById("container").addEventListener("click", fadeOut); function addImage(url) { const img = document.createElement("img"); img.src = url; pictures.appendChild(img); } function displayTitle(title) { const photoTitle = document.createElement("p"); photoTitle.innerText = title; pictures.appendChild(photoTitle); } axios.get(APIURL).then(function (res) { itemCount = res.data.length; res.data.map(function (albums) { addImage(albums.thumbnailUrl); displayTitle(albums.title); document.getElementById("item-count").innerHTML = `There are ${itemCount} photo(s) being shown`; }); });
 .grid-container { display: grid; grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; grid-auto-columns: 1fr; gap: 0.25rem; margin: 4px; margin-top: 10rem; width: 100%; height: 20px; position: relative; } .grid-container p { /* position: absolute; */ display: flex; font-weight: bold; font-size: 12px; margin-left: -11rem; align-self: flex-end; color: #fff; } .grid-container img { height: 300px; } .item-title { position: absolute; align-self: center; margin-top: -10rem; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="../css/index.css" /> <link rel="stylesheet" type="text/css" href="../css/signup.css" /> <link rel="stylesheet" type="text/css" href="../css/home.css" /> <script defer src="../js/homeScript.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <title>Document</title> </head> <body> <div class="container"> <div class="item-title"> <h1 id="item-count"></h1> </div> <div class="grid-container" id="container"></div> </div> </body> </html>

解决方案2
 2 已采纳  2020-11-03 01:58:20

Put the count in its own span.把计数放在它自己的范围内。 Then you can descrement that element.然后您可以递减该元素。 

 let pictures = document.getElementById("container"); let itemCount = document.getElementById("item-count"); let APIURL = "https://jsonplaceholder.typicode.com/albums/2/photos"; function fadeOut(event) { let fadeTarget = event.target; let fadeEffect = setInterval(function() { if (!fadeTarget.style.opacity) { fadeTarget.style.opacity = 1; } if (fadeTarget.style.opacity > 0) { fadeTarget.style.opacity -= 0.1; } else { clearInterval(fadeEffect); document.getElementById("length").innerText--; } }, 200); } document.getElementById("container").addEventListener("click", fadeOut); function addImage(url) { const img = document.createElement("img"); img.src = url; pictures.appendChild(img); } function displayTitle(title) { const photoTitle = document.createElement("p"); photoTitle.innerText = title; pictures.appendChild(photoTitle); } axios.get(APIURL).then(function(res) { const length = res.data.length; console.log(res.data); res.data.map(function(albums) { addImage(albums.thumbnailUrl); displayTitle(albums.title); itemCount.innerHTML = `There are <span id="length">${length}</span> photo(s) being shown`; }); });
 .grid-container { display: grid; grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; grid-auto-columns: 1fr; gap: 0.25rem; margin: 4px; margin-top: 10rem; width: 100%; height: 20px; position: relative; } .grid-container p { /* position: absolute; */ display: flex; font-weight: bold; font-size: 12px; margin-left: -11rem; align-self: flex-end; color: #fff; } .grid-container img { height: 300px; } .item-title { position: absolute; align-self: center; margin-top: -10rem; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="../css/index.css" /> <link rel="stylesheet" type="text/css" href="../css/signup.css" /> <link rel="stylesheet" type="text/css" href="../css/home.css" /> <script defer src="../js/homeScript.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <title>Document</title> </head> <body> <div class="container"> <div class="item-title"> <h1 id="item-count"></h1> </div> <div class="grid-container" id="container"></div> </div> </body> </html>

解决方案3
 1  2020-11-03 01:53:04

Make you counter global and rewrite your output in the fadeOut() function.使您在fadeOut()函数中反制全局并重写您的输出。

See the changes below:请参阅以下更改： 

 let pictures = document.getElementById("container"); let itemCount = document.getElementById("item-count"); let APIURL = "https://jsonplaceholder.typicode.com/albums/2/photos"; let length = 0; function fadeOut(event) { let fadeTarget = event.target; let fadeEffect = setInterval(function() { if (!fadeTarget.style.opacity) { fadeTarget.style.opacity = 1; } if (fadeTarget.style.opacity > 0) { fadeTarget.style.opacity -= 0.1; } else { clearInterval(fadeEffect); } }, 200); length--; itemCount.innerHTML = `There are ${length} photo(s) being shown`; } document.getElementById("container").addEventListener("click", fadeOut); function addImage(url) { const img = document.createElement("img"); img.src = url; pictures.appendChild(img); } function displayTitle(title) { const photoTitle = document.createElement("p"); photoTitle.innerText = title; pictures.appendChild(photoTitle); } axios.get(APIURL).then(function(res) { length = res.data.length; console.log(res.data); res.data.map(function(albums) { addImage(albums.thumbnailUrl); displayTitle(albums.title); itemCount.innerHTML = `There are ${length} photo(s) being shown`; }); });
 .grid-container { display: grid; grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; grid-auto-columns: 1fr; gap: 0.25rem; margin: 4px; margin-top: 10rem; width: 100%; height: 20px; position: relative; } .grid-container p { /* position: absolute; */ display: flex; font-weight: bold; font-size: 12px; margin-left: -11rem; align-self: flex-end; color: #fff; } .grid-container img { height: 300px; } .item-title { position: absolute; align-self: center; margin-top: -10rem; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="../css/index.css" /> <link rel="stylesheet" type="text/css" href="../css/signup.css" /> <link rel="stylesheet" type="text/css" href="../css/home.css" /> <script defer src="../js/homeScript.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <title>Document</title> </head> <body> <div class="container"> <div class="item-title"> <h1 id="item-count"></h1> </div> <div class="grid-container" id="container"></div> </div> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 操纵H1标签 - Manipulation H1 Tag 如何使用JS获取h1标签的值？ - How to get the value of h1 tag using JS? 在 React 中加载页面时未显示 H1 标记值 - H1 tag value not showing when page loads up in React 如何使用 Jest 和 RTL 获取 H1 标签的值并进行测试 - How to get the value of H1 tag and test it using Jest and RTL 随机获取Li的Single值并打印在 <h1> 标签 - Get a Single value of Li randomly and print it in <h1> tag 将 h2 标签更改为 h1 标签 - Change h2 tag to h1 tag H1标签溢出图像？ - H1 tag overflow the image? 无法识别附加的h1标签 - Appended h1 tag not recognized 切换填充 <h1> 标签 - Toggle padding of a <h1> tag h1 标签内的函数？ - A function inside of the h1 tag?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM