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

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

isale-2012

Функция, преобразующая тег 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):

Похожие темы	Дата
Трабл с градиентом...	19.10.2024, 18:10
Презентация фотошоп CS4	19.10.2024, 18:10
А что такое фотошоп онлайн, для чего он нужен?	19.10.2024, 18:10
Связывание справки	19.10.2024, 18:10
Нужна помощь с веб-дизайном	19.10.2024, 18:10
Фоновое изображение в Div с цветовой подписью, следующей за АЛЬФА	19.10.2024, 18:10
Визуальное отображение статей	19.10.2024, 18:10
Предложение по проблеме .HTACCESS	19.10.2024, 18:10
Бесплатные и предустановленные темы VS. Создайте свой собственный шаблон Wordpress	19.10.2024, 18:10
Все владельцы бизнеса должны знать эти 10 вещей, прежде чем создавать веб-сайт	19.10.2024, 18:10

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

Elantra

LITWIN1

isale-2012

I AM

Интересно