Я должен фильтровать изображения без javascript или divs :/

ProgramBox

Я должен фильтровать изображения без javascript или divs :/

Post author:admin
Запись опубликована:18 мая, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Для проекта для университета мы должны создать страницу продукта, где клиенты могут фильтровать продукты (изображения) на основе определенной характеристики (бренда в моем случае). Я пытался сделать это с помощью кнопок и флажков, но без javascript или divs заставить это работать было довольно сложно. Я поместил изображения в таблицу, поскольку так проще придать структурированный вид.Заранее спасибо, что взглянули на мой код!

 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>

1. Это какие-то странные требования, особенно к divs. Я понятия не имею, как вы могли бы динамически фильтровать содержимое без javascript.

2. Подход с использованием #class1.tablefilter:checked ~ table tbody tr.class1 выглядит хорошим и допустимым для меня. Возможно, ваш браузер автоматически не добавляет tbody, который вы используете в своем CSS-селекторе, но не в вашем HTML-коде?

3. Вы вообще используете серверную часть? Единственный способ, которым я могу увидеть, что это происходит, — это если вы используете форму для отправки выбранных фильтров и возвращаете только те данные, которые соответствуют фильтру в серверной части

4. Я только что понял, что вы не скрываете строки таблицы, потому что вы используете разные имена классов в таблице в CSS и HTML. <table class="tableProducten"> против .filteredtable tbody tr

5. мой старый дилетант (6 лет), использующий чистый CSS, его изображение для фильтрации входных данных и меток на рисунке с помощью classnames, все вставлено в форму * (которая может позволить вам отправлять свои варианты / фильтрацию)* Я тестировал HTML5 и transition dabblet.com/gist/4262212 (дизайн — это не мое .. )

Ответ №1:

Используйте это в своем CSS (вы не используете то же имя класса в своем селекторе, которое вы дали своей таблице в HTML)

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