#javascript #html #css
#javascript #HTML #css
Вопрос:
В этом HTML-файле я хотел бы добавить функциональность фильтра поиска изображений. Например, есть три изображения, которые состоят из одного изображения Наруто, одного изображения Супермена и одного изображения Бэтмена. Итак, я хотел бы добавить функциональность, например, когда я набираю «N или n», только изображение Naruto показывает, что два других скрыты, и то же самое для остальных двух. Я думаю, что прогон изображений через массив сработал бы, но не смог бы сделать это для изображений, и я видел много видео на YouTube, но большинство из них используют jQuery, electron, но я хотел бы использовать только Javascript.
Скриншот файла и код (HTML и CSS) приведены ниже: пример изображения
HTML:
<body>
<div class="container">
<div class="searchbox_container">
<div class="searchbox">
<input type="text" name=" " placeholder="Search" class="search">
</div>
</div>
<div class="image_container">
<img src="images/naruto.png" alt=""
class="actionimages">
<img src="images/batman.png" alt=""
class="actionimages">
<img src="images/superman.png" alt=""
class="actionimages">
</div>
</div>
</body>
CSS:
<style>
body {
background-color: black;
}
.container {
width: 700px;
height: 400px;
border: 2px solid yellow;
margin: auto;
background-color: black;
}
input {
border: 2px solid darkgoldenrod;
background-color: yellow;
border-radius: 2px;
width: 100px;
height: 10px;
padding: 0 10px;
font-size: smaller;
color: black;
}
.searchbox {
float: right;
margin-top: 5px;
margin-right: 5px;
}
.image_container
{ width:300px;
border:2px solid yellow;
clear:both;
margin:0 auto;
margin-top:50px;
}
.image_container img{
width:90px;
margin-right:auto;
}
</style>
Прошу прощения за любые ошибки.Спасибо.
Комментарии:
1. это похоже на то, что вам нужно фильтровать по имени файла изображений?
2. означает ли это, что если я сохраню имена файлов изображений соответственно, то поиск будет основан на имени файла?
3. нам нужно каким-то образом знать, какое изображение является batman или чем-то подобным
4. Вот я и спросил, можем ли мы полагаться на имя файла, чтобы мы могли искать пользовательский запрос, присутствующий в имени файла или нет
5. о, мне добавить идентификаторы в изображения и отредактировать вопрос?
Ответ №1:
Это то, что я понял из ваших комментариев
var input=document.querySelector('.search');
var images=document.querySelectorAll('.image_container > img');
input.addEventListener('keydown',function(){
for(var i=0; i<images.length;i )
{
if(new RegExp(this.value).test(images[i].src))
{
images[i].style.display ='block'
}
else
{
images[i].style.display ='none'
}
console.log(images[i].src)
}
})
Комментарии:
1. добавлен пример скрипки
2. Возможно, вы получили бы неожиданный результат в скрипке. Это потому, что я забыл сохранить его перед публикацией здесь. проверьте сейчас
3. Спасибо, это сработало. Не могли бы вы, пожалуйста, объяснить код?
4. Я только что создал событие для текстового поля при вводе пользователем. Когда он срабатывает, я проверил, содержит ли какой-либо URL-адрес изображения введенное пользователем значение (посмотрите на цикл). если он содержит, покажите или скройте его
5. (новое регулярное выражение(this.value).test(images[i].src)) , пожалуйста, объясните эту строку кода
Ответ №2:
короче говоря, вы можете использовать javasscript для поиска изображения. однако то, как вы реализуете поиск, зависит от вас.
один из способов сделать это — использовать атрибут data для ваших изображений data-tags="naruto" data-tags="batman" и так далее.
Как вы можете видеть в примере ниже, я создал атрибут для тегов и добавил нужные имена к тегам, например, изображение Бэтмена имеет атрибут тега batman.
Затем в javascript я получаю все изображения, когда пользователь вводит что-то в текстовое поле поиска и перебирает эти изображения.
в цикле сначала я скрываю каждое изображение, затем проверяю с помощью оператора if, содержит ли тег изображения искомый текст, используя indexOf , если в теге есть текст поиска, тогда я показываю изображение
function search(){
var searchText = document.getElementById("searchInput").value;
var images = document.querySelectorAll(".image_container > img");
if(searchText.length > 0){
images.forEach((image) => {
image.classList.add("hide");
if(image.dataset.tags.indexOf(searchText) > -1){
image.classList.remove("hide");
}
});
}else{
images.forEach((image) => {
image.classList.remove("hide");
});
}
} body {
background-color: black;
}
.container {
width: 700px;
height: 400px;
border: 2px solid yellow;
margin: auto;
background-color: black;
}
input {
border: 2px solid darkgoldenrod;
background-color: yellow;
border-radius: 2px;
width: 100px;
height: 10px;
padding: 0 10px;
font-size: smaller;
color: black;
}
.searchbox {
float: right;
margin-top: 5px;
margin-right: 5px;
}
.image_container
{ width:300px;
border:2px solid yellow;
clear:both;
margin:0 auto;
margin-top:50px;
}
.image_container img{
width:90px;
margin-right:auto;
}
.hide{
display:none;
} <div class="container">
<div class="searchbox_container">
<div class="searchbox">
<input type="text" name=" " placeholder="Search" class="search" id="searchInput" onkeyup="search()">
</div>
</div>
<div class="image_container">
<img data-tags="naruto" src="https://img.freepik.com/free-psd/3d-gold-logo-mockup-facade-sign_204971-162.jpg?size=664amp;ext=jpg" alt=""
class="actionimages">
<img data-tags="batman" src="https://img.freepik.com/free-photo/side-view-man-dancing_23-2148666505.jpg?size=664amp;ext=jpg" alt=""
class="actionimages">
<img data-tags="superman" src="https://img.freepik.com/free-vector/beautiful-floral-invitation-card-template_21799-4192.jpg?size=664amp;ext=jpg" alt=""
class="actionimages">
</div>
</div>