减少h1标签中的值

编程问答 2022-06-04

问题描述

因此，在我的代码中，当前显示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>

解决方法

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

在这里，我已经存储了未隐藏在itemCount变量中的iamges，并且每当用户单击图像使其完全淡出时，就减少了项目计数，并在{{1}之后更新了h1标签，如下所示}。

clearInterval

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

,

将计数置于自己的范围内。然后，您可以减少该元素。

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

,

让您全局计数器并在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,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>

decrementjavascript