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

Elantra

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

 <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

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

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

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

 
label[for=tag1] {
 cursor:pointer;
 /* style as a button here */
}

#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. Но что я знаю? Я до сих пор называю это цифровым знаком и ругаю людей, называющих это «фунтом».

Attambdiatt

Функция, преобразующая тег img в json.

HTML-код

 function imgTagToJSONString(elem) {
 var id = elem.getAttribute('id');
 var src = elem.getAttribute('src');
 var alt = elem.getAttribute('alt');
 var clas = elem.getAttribute('class');
 var res = '{"id":"' + id + '",' + '"src":"' + src + '",'
 + '"alt":"' + alt + '",' + '"class":"' + clas + '"}';
 return res;
}

// Convert img tag to JSON string
var img = document.getElementById('img1');
var imgTagString = imgTagToJSONString(img);
//alert(imgTagString);
// Convert to Object
var imgTagObj = JSON.parse(imgTagString);
//alert(obj.id);

HTML: код JavaScript

 <img id="img1" src="1.jpg" alt="#хэштег1 #хэштег2" class="#hashtag1 hashtag2">

Код (JavaScript):

Похожие темы	Дата
у кого есть пустой шаблон cd диска?	19.12.2024, 05:12
помогите с циклом while	19.12.2024, 05:12
В чем суть блоггерства?	19.12.2024, 05:12
Шаблон объявления Ebay	19.12.2024, 05:12
Как добавить статьи на сайт?	19.12.2024, 05:12
Мобильный JavaScript не работает	19.12.2024, 05:12
создать циферблат с помощью CSS	19.12.2024, 05:12
Как динамически менять цвет в зависимости от фона?	19.12.2024, 05:12
Стоит ли мне по-прежнему использовать jQuery с HTML5 в 2019 году?	19.12.2024, 05:12
Помоги пожалуйста!	19.12.2024, 05:12

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

Elantra

LITWIN1

Attambdiatt

I AM

Интересно