html - 我必须在没有 javascript 或 div 的情况下过滤图像 :/

Question

对于一个大学元素，我们必须制作一个产品页面，客户可以在其中根据特定特征(在我的案例中为品牌)过滤产品(图像)。我曾尝试在按钮和复选框的帮助下完成此操作，但如果没有 javascript 或 div，要使其正常工作是一项相当大的挑战。我已将图像放在表格中，因为这样更容易给出结构化的外观。在此先感谢您查看我的代码!

tr {
  position: relative;
}

.ImgProd {
  border: solid 3px dimgrey;
  width: 180px;
  height: 180px;
  transition: .2s;
}

.filteredtable tbody tr,
.tablefilter {
  display: none;
}

#class1.tablefilter:checked~table tbody tr.class1,
#class2.tablefilter:checked~table tbody tr.class2,
#class3.tablefilter:checked~table tbody tr.class3 {
  display: table-row;
}

.tablefilter+label {
  cursor: pointer;
  background-color: #666;
  color: #fff;
  padding: 3px;
}

.tablefilter:checked+label {
  background-color: #111;
}


/*hiermee zorgen we ervoor dat de image zoomt wanneer de gebruiker erover hovert*/

.ImgProd:hover {
  transform: scale(2);
}

.tableProducten {
  position: relative;
  left: 6%
}

<h1>Onze producten</h1>
<!-- we gebruiken buttons als fitler element tussen de verschillende merken van auto's -->
<input type="checkbox" class="tablefilter" name="class1" id="class1" checked />
<label for="class1">Mercedes</label>
<input type="checkbox" class="tablefilter" name="class2" id="class2" checked />
<label for="class2">BMW</label>
<input type="checkbox" class="tablefilter" name="class3" id="class3" checked />
<label for="class3">Opel</label>

<table class="tableProducten">
  <tr class="class1">
    <td>
      <img src="../resources/Mercedes/AMG_GT4.jpg" alt="AMG GT4" class="ImgProd">
    </td>
    <td>
      <img src="../resources/Mercedes/BenzSla.jpg" alt="BenzSla" class="ImgProd">
    </td>
    <td>
      <img src="../resources/Mercedes/Cla.jpg" alt="Cla" class="ImgProd">
    </td>
    <td>
      <img src="../resources/Mercedes/DEX.jpg" alt="DEX" class="ImgProd">
    </td>
    <td>
      <img src="../resources/Mercedes/Eklas.jpg" alt="Eklas" class="ImgProd">
    </td>
    <td>
      <img src="../resources/Mercedes/EQC.jpg" alt="EQC" class="ImgProd">
    </td>
    <td>
      <img src="../resources/Mercedes/SUV.jpg" alt="SUV" class="ImgProd">
    </td>
  </tr>
  <tr class="class2">
    <td>
      <img src="../resources/BMW/AC.jpg" alt="bmw AC" class="ImgProd">
    </td>
    <td>
      <img src="../resources/BMW/IX3.jpg" alt="IX3" class="ImgProd">
    </td>
    <td>
      <img src="../resources/BMW/M2.jpg" alt="M2" class="ImgProd">
    </td>
    <td>
      <img src="../resources/BMW/M5.jpg" alt="M5" class="ImgProd">
    </td>
    <td>
      <img src="../resources/BMW/M6.jpg" alt="M6" class="ImgProd">
    </td>
    <td>
      <img src="../resources/BMW/X1.jpg" alt="X1" class="ImgProd">
    </td>
    <td>
      <img src="../resources/BMW/Z4.jpg" alt="Z4" class="ImgProd">
    </td>
  </tr>
  <tr class="class3">
    <td>
      <img src="../resources/OPEL/Adam.jpg" alt="ADAM" class="ImgProd">
    </td>
    <td>
      <img src="../resources/OPEL/Astra.jpg" alt="Astra" class="ImgProd">
    </td>
    <td>
      <img src="../resources/OPEL/ComboL1.jpg" alt="ComboL1" class="ImgProd">
    </td>
    <td>
      <img src="../resources/OPEL/Corsa.jpg" alt="Corsa" class="ImgProd">
    </td>
    <td>
      <img src="../resources/OPEL/CorsaX.jpg" alt="CorsaX" class="ImgProd">
    </td>
    <td>
      <img src="../resources/OPEL/MokkaX.jpg" alt="MokkaX" class="ImgProd">
    </td>
  </tr>
</table>

Answer 1

在您的 CSS 中使用它(您在选择器中使用的类名与您在 HTML 中为表格提供的类名不同)

.tableProducten tbody tr,
.tablefilter{
    display:none;
}