减少 h1 标签中的值

Question

所以，在我的代码中，目前显示了 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>

Answer 1

让你反全局并在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>

Answer 2

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

在这里，我将未隐藏的 iamges 存储在 itemCount 变量中，每当用户单击图像时它就会完全淡出，减少项目计数并在 [= 之后更新 h1 标签如下16=] 被调用。

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>

Answer 3

将计数放在它自己的范围内。然后你可以递减那个元素。

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>

减少 h1 标签中的值

Decrement a value in h1 tag

javascript

decrement