Показывать только изображения с хэштегом

Elantra · 13.05.24

У меня есть список изображений

Код:

<html>
<body>
<button id="hashtag1" onclick="showImages('#hashtag1')">#hashtag1</button>
<br>
<img src="img1.jpg" class="#hashtag1 #hashtag2">
<img src="img2.jpg" class="#hashtag2 #hashtag3">
<img src="img3.jpg" class="#hashtag1 #hashtag3">
<script> function showImages(hastag) {
}
</script>
</body>
</html>

HTML: по умолчанию загружаются все изображения.
Если пользователь нажимает кнопку #hastag1, отображаются только изображения с #hastag1.
При необходимости я могу использовать объект json для хранения данных изображений.
Я не уверен, где хранить данные #hashtag. Внутри атрибута класса, внутри объекта изображений json или внутри атрибута alt?

Показывать только изображения с хэштегом

LITWIN1 · 01.06.24

Ваш код — полная ерунда, потому что классы не могут начинаться с #. # указывает идентификатор в CSS. Классы могут/должны содержать только буквенно-цифровые символы, символы подчеркивания и дефисы.

Смейтесь, для этого вам даже не нужен JavaScript.

Код:

label[for=tag1] { cursor:pointer; 
}
#tag1:checked ~ img:not(.tag1) {
display:none;
}

Код (разметка):

<input type="checkbox" id="tag1" hidden> <label for="tag1">Tag 1</label> <br> <img src="img1.jpg" class="tag1 tag2" alt="опишите это, alt не является обязательным"> <img src="img2.jpg" class="tag2 tag3" alt="опишите это, alt не является обязательным"> <img src="img3.jpg" class="tag1 tag3" alt="опишите это, alt не является обязательным">

Код (разметка): Хотя то, как вы продолжаете произносить «хеш-тег» или «хеш-данные», заставляет меня думать, что вы не знаете, что «хэш-тег» — это просто то, что он называется в адресной строке и что он должен делать. с тем, что вам следует делать в HTML/CSS.

Но что я знаю? Я до сих пор называю это цифровым знаком и ругаю людей, называющих это «фунтом».

Показывать только изображения с хэштегом

Elantra

LITWIN1

Поделиться страницей

О нашем форуме!

Новые пользователи

Что нового?