堆栈内存溢出
  繁体   English   中英

减少 h1 标签中的一个值

[英]Decrement a value in h1 tag

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

问题描述

所以，在我的代码中，目前显示了 50 张照片，但是，每次我点击照片时，它都会淡出，照片数量应该减少。

我的 h1 标签显示There are 50 photo(s) being shown ，但我的照片所有内容都淡出，此标签应自行更新并减少数量。 我无法将其作为代码实现。

就实际编码而言，任何人都可以帮助我完成此实现吗？ 如果可以，那将意味着很多！ 

 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

  • 要在单击图像时显示减少的项目数，需要将未隐藏的项目数存储为variable 。

在这里，我存储了未隐藏在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

把计数放在它自己的范围内。 然后您可以递减该元素。 

 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

使您在fadeOut()函数中反制全局并重写您的输出。

请参阅以下更改： 

 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标签 如何使用JS获取h1标签的值？ 在 React 中加载页面时未显示 H1 标记值 如何使用 Jest 和 RTL 获取 H1 标签的值并进行测试 随机获取Li的Single值并打印在 <h1> 标签 将 h2 标签更改为 h1 标签 H1标签溢出图像？ 无法识别附加的h1标签 切换填充 <h1> 标签 h1 标签内的函数？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM