如何正确显示“每行结果”（从“下拉菜单”中的“单击条目”）？

Question

这里的编码爱好者试图弄清楚如何：“创建数字档案。”

更具体地说：

A.)“当有人偶然发现这个（仅限 HTML/CSS/JavaScript）网页时，他们会看到一个项目列表（当他们的鼠标悬停在此类项目上时，此类项目会放大）。

B.) 他们将看到的项目列表将是：每行 3 个条目，每行 5 个条目，或每行 10 个条目。（几乎就像，您正在浏览某人的艺术作品档案。（随机的路人，如果他们想一次看到“3,5,或10”张图像，可以从下拉菜单中单击（这是我们正在使用的代码今天一起。）。

C.）我已经编写了一些代码，每行显示 3 个条目。

C.1) 我被困住了。我不知道前进的最佳方法/代码/能力是什么。喜欢：

C.1.1) 如果随机有人访问我的网页，并且想要查看“每行 5 个条目”。如何在第三次输入后显示“图像编号 4”？但如果有人选择“他们宁愿每行看到 3 个条目”，则弹回到下一行。

在继续之前，这是我提供的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Digital Archive 3-5-10 Images Per Row</title>
<style>
.CenterOfCardCreationPage {
text-align: center;
}
.ContainerForCardCreationContainer {
flex-direction: column;
}
.CardCreationContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start; 
padding: 20px;
}
.CardCreationColumn {
flex: 0 0 30%; 
margin: 10px;
padding: 10px;
text-align: center;
}
.CardCreationButton {
display: inline-block;
padding: 10px 20px;
color: white;
text-decoration: none;
border: none;
cursor: pointer;
}
.CardCreationImage {
width: 100%;
height: auto;
object-fit: contain;
}
@media (max-width: 600px) {
.CardCreationColumn {
flex: 0 0 45%;
}
}
@media (max-width: 400px) {
.CardCreationColumn {
flex: 0 0 90%;
}
}
</style>
</head>
<body>
<header class="CenterOfCardCreationPage">
<h1>Items Per Page: 3,5 or 10?</h1>
<label for="resultsPerPage">How many Results would you like?</label>
<select id="resultsPerPage">
<option value="1">3</option>
<option value="2">5</option>
<option value="3">10</option>
</select>
</header>
<div class="ContainerForCardCreationContainer">
<div class="CardCreationContainer">
<div class="CardCreationColumn">
<button id="uploadButton1" onclick="uploadImage(1)">Upload Image</button>
<div id="imagePlaceholder1" class="CardCreationButton">
<img id="image1" class="CardCreationImage" src="" alt="An Image 01" />
</div>
</div>
<div class="CardCreationColumn">
<button id="uploadButton2" onclick="uploadImage(2)">Upload Image</button>
<div id="imagePlaceholder2" class="CardCreationButton">
<img id="image2" class="CardCreationImage" src="" alt="An Image 02" />
</div>
</div>
<div class="CardCreationColumn">
<button id="uploadButton3" onclick="uploadImage(3)">Upload Image</button>
<div id="imagePlaceholder3" class="CardCreationButton">
<img id="image3" class="CardCreationImage" src="" alt="An Image 03" />
</div>
</div>
</div>
<div class="CardCreationContainer">
<div class="CardCreationColumn">
<button id="uploadButton4" onclick="uploadImage(4)">Upload Image</button>
<div id="imagePlaceholder4" class="CardCreationButton">
<img id="image4" class="CardCreationImage" src="" alt="An Image 04" />
</div>
</div>
<div class="CardCreationColumn">
<button id="uploadButton5" onclick="uploadImage(5)">Upload Image</button>
<div id="imagePlaceholder5" class="CardCreationButton">
<img id="image5" class="CardCreationImage" src="" alt="An Image 05" />
</div>
</div>
<div class="CardCreationColumn">
<button id="uploadButton6" onclick="uploadImage(6)">Upload Image</button>
<div id="imagePlaceholder6" class="CardCreationButton">
<img id="image6" class="CardCreationImage" src="" alt="An Image 06" />
</div>
</div>
</div>
<div class="CardCreationContainer">
<div class="CardCreationColumn">
<button id="uploadButton7" onclick="uploadImage(7)">Upload Image</button>
<div id="imagePlaceholder7" class="CardCreationButton">
<img id="image7" class="CardCreationImage" src="" alt="An Image 74" />
</div>
</div>
<div class="CardCreationColumn">
<button id="uploadButton8" onclick="uploadImage(8)">Upload Image</button>
<div id="imagePlaceholder8" class="CardCreationButton">
<img id="image8" class="CardCreationImage" src="" alt="An Image 08" />
</div>
</div>
<div class="CardCreationColumn">
<button id="uploadButton9" onclick="uploadImage(9)">Upload Image</button>
<div id="imagePlaceholder9" class="CardCreationButton">
<img id="image9" class="CardCreationImage" src="" alt="An Image 09" />
</div>
</div>
</div>
</div>
<!-- Footer with centered text -->
<footer class="CenterOfCardCreationPage">
<h2>Thank you for checking this code out!</h2>
</footer>
<script>
//the code below is the stuff for dropdownmenu
const resultsPerPageSelect = document.getElementById('resultsPerPage');
const cardCreationContainers = document.getElementsByClassName('CardCreationContainer');
resultsPerPageSelect.addEventListener('change', (event) => {
const selectedOption = parseInt(event.target.value, 10);
for (let i = 0; i < cardCreationContainers.length; i++) {
if (i < selectedOption) {
cardCreationContainers[i].style.display = 'flex';
} else {
cardCreationContainers[i].style.display = 'none';
}
}
});
// Initial display based on the selected option
resultsPerPageSelect.dispatchEvent(new Event('change'));
// the stuff below is the code for uploading images
let uploadedImages = 0;
// Function to handle image upload
function uploadImage(CardCreationColumnNumber) {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = function () {
const file = this.files[0];
const reader = new FileReader();

reader.onload = function () {
const imagePlaceholder = document.getElementById(`image${CardCreationColumnNumber}`);
imagePlaceholder.src = reader.result;
uploadedImages++;
// Enable the second button if the first image is uploaded 
if (CardCreationColumnNumber === 1) {
const secondButton = document.getElementById('uploadButton27');
secondButton.disabled = false;
}
};
reader.readAsDataURL(file);
};
input.click();
}
</script>
</body>
</html>

C.1.2.）就像，我尝试的是将“第四和第五图像”（然后是第六到第十）插入第一行（以及后两行中的等价物），但这不起作用。当有人从 5 行改回 3 行，或从 10 行改回 3 行时，那些“代表其他图像的 ID 将从视图中消失，只有下一组可见的行会显示它们的 ID”。

D.）这引出了我的问题，（因为我认为我从一个角度看到了太多这一点，并且不想放弃它，因为我花了一分钟的时间来研究它）。 “我如何正确修复/升级此问题，以便当随机路人看到此网页时，他们可以选择是否希望每行看到 3、5、10 个结果/图像，以及是否希望将其更改回每行 3 个图像，我们不会丢失第一行中的图像编号 4-10，只是为了第二行显示其前 3 个选项（本来是图像 11、12、13（然后第三行显示图像 21、22）、& 23) 而不是仅仅“将图像 4、5、6 从第一行移除，并放置在第二行；将图像 7、8 和 9 放置在第三行。”

（注意：关于这个问题的半不相关的注释：我想我一直在说：“每页结果”，当我的意思是“每行结果”时，我在这里和那里编辑了它，但如果我错过了任何-我的b-但这就是什么我的意思是，每页的结果会很酷，但不是现在的目标。）

你们都明白我的要求了吗？我被困在如何前进；任何帮助（甚至任何关于如何更好地解决这个问题的明智建议）将不胜感激！

-Scholah

Answer 1

当我们专注于每行的结果时，我们可以使用网格来设置每行显示的数量。

首先，“扁平化”HTML 中的结构。只需列出每个项目，不要尝试在那里强加行结构。

然后将容器设置为网格，其列数由用户选择的内容决定。这可以通过设置 CSS 变量（在本例中为 --cols）并使用它来设置列数来从 JS 传达到 CSS。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Digital Archive 3-5-10 Images Per Row</title>
  <style>
    .CenterOfCardCreationPage {
      text-align: center;
    }
    
    .ContainerForCardCreationContainer {
      display: grid;
      --cols: 3;
      grid-template-columns: repeat(var(--cols), 1fr);
      width: 100vw;
    }
    
    .CardCreationContainer {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      padding: 20px;
    }
    
    .CardCreationColumn {
      flex: 0 0 30%;
      margin: 10px;
      padding: 10px;
      text-align: center;
    }
    
    .CardCreationButton {
      display: inline-block;
      padding: 10px 20px;
      color: white;
      text-decoration: none;
      border: none;
      cursor: pointer;
    }
    
    .CardCreationImage {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
    
    @media (max-width: 600px) {
      .CardCreationColumn {
        flex: 0 0 45%;
      }
    }
    
    @media (max-width: 400px) {
      .CardCreationColumn {
        flex: 0 0 90%;
      }
    }
  </style>
</head>

<body>
  <header class="CenterOfCardCreationPage">
    <h1>Items Per Row: 3,5 or 10?</h1>
    <label for="resultsPerPage">How many Results would you like?</label>
    <select id="resultsPerPage">
      <option value="1">3</option>
      <option value="2">5</option>
      <option value="3">10</option>
    </select>
  </header>
  <div class="ContainerForCardCreationContainer">
    <div class="CardCreationColumn">
      <button id="uploadButton1" onclick="uploadImage(1)">Upload Image</button>
      <div id="imagePlaceholder1" class="CardCreationButton">
        <img id="image1" class="CardCreationImage" src="" alt="An Image 01" />
      </div>
    </div>
    <div class="CardCreationColumn">
      <button id="uploadButton2" onclick="uploadImage(2)">Upload Image</button>
      <div id="imagePlaceholder2" class="CardCreationButton">
        <img id="image2" class="CardCreationImage" src="" alt="An Image 02" />
      </div>
    </div>
    <div class="CardCreationColumn">
      <button id="uploadButton3" onclick="uploadImage(3)">Upload Image</button>
      <div id="imagePlaceholder3" class="CardCreationButton">
        <img id="image3" class="CardCreationImage" src="" alt="An Image 03" />
      </div>
    </div>
    <div class="CardCreationColumn">
      <button id="uploadButton4" onclick="uploadImage(4)">Upload Image</button>
      <div id="imagePlaceholder4" class="CardCreationButton">
        <img id="image4" class="CardCreationImage" src="" alt="An Image 04" />
      </div>
    </div>
    <div class="CardCreationColumn">
      <button id="uploadButton5" onclick="uploadImage(5)">Upload Image</button>
      <div id="imagePlaceholder5" class="CardCreationButton">
        <img id="image5" class="CardCreationImage" src="" alt="An Image 05" />
      </div>
    </div>
    <div class="CardCreationColumn">
      <button id="uploadButton6" onclick="uploadImage(6)">Upload Image</button>
      <div id="imagePlaceholder6" class="CardCreationButton">
        <img id="image6" class="CardCreationImage" src="" alt="An Image 06" />
      </div>
    </div>
    <div class="CardCreationColumn">
      <button id="uploadButton7" onclick="uploadImage(7)">Upload Image</button>
      <div id="imagePlaceholder7" class="CardCreationButton">
        <img id="image7" class="CardCreationImage" src="" alt="An Image 74" />
      </div>
    </div>
    <div class="CardCreationColumn">
      <button id="uploadButton8" onclick="uploadImage(8)">Upload Image</button>
      <div id="imagePlaceholder8" class="CardCreationButton">
        <img id="image8" class="CardCreationImage" src="" alt="An Image 08" />
      </div>
    </div>
    <div class="CardCreationColumn">
      <button id="uploadButton9" onclick="uploadImage(9)">Upload Image</button>
      <div id="imagePlaceholder9" class="CardCreationButton">
        <img id="image9" class="CardCreationImage" src="" alt="An Image 09" />
      </div>
    </div>
  </div>
  <!-- Footer with centered text -->
  <footer class="CenterOfCardCreationPage">
    <h2>Thank you for checking this code out!</h2>
  </footer>
  <script>
    //the code below is the stuff for dropdownmenu
    const resultsPerPageSelect = document.getElementById('resultsPerPage');
    const cardCreationContainers = document.getElementsByClassName('CardCreationContainer');
    resultsPerPageSelect.addEventListener('change', (event) => {
      const selectedOption = parseInt(event.target.value, 10);
      document.querySelector('.ContainerForCardCreationContainer').style.setProperty('--cols', resultsPerPageSelect[selectedOption - 1].innerHTML);
      for (let i = 0; i < cardCreationContainers.length; i++) {
        if (i < selectedOption) {
          cardCreationContainers[i].style.display = 'flex';
        } else {
          cardCreationContainers[i].style.display = 'none';
        }
      }
    });
    // Initial display based on the selected option
    resultsPerPageSelect.dispatchEvent(new Event('change'));
    // the stuff below is the code for uploading images
    let uploadedImages = 0;
    // Function to handle image upload
    function uploadImage(CardCreationColumnNumber) {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';
      input.onchange = function() {
        const file = this.files[0];
        const reader = new FileReader();

        reader.onload = function() {
          const imagePlaceholder = document.getElementById(`image${CardCreationColumnNumber}`);
          imagePlaceholder.src = reader.result;
          uploadedImages++;
          // Enable the second button if the first image is uploaded 
          if (CardCreationColumnNumber === 1) {
            const secondButton = document.getElementById('uploadButton27');
            secondButton.disabled = false;
          }
        };
        reader.readAsDataURL(file);
      };
      input.click();
    }
  </script>
</body>

</html>

注意，此代码仅集中于一行中的元素数量。页面中的元素数量是一个不同的问题，我发现您可能希望用 JS 来解决这个问题。

如何正确显示“每行结果”（从“下拉菜单”中的“单击条目”）？

问题描述投票：0回答：1

1个回答

最新问题

如何正确显示“每行结果”（从“下拉菜单”中的“单击条目”）？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1