Портфолио изображений из черно-белого в цвет с помощью кнопки фильтра

ProgramBox

Портфолио изображений из черно-белого в цвет с помощью кнопки фильтра

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

#javascript #html #css #image #portfolio

#javascript #HTML #css #изображение #Портфолио

Вопрос:

Я пытаюсь создать портфолио с помощью фильтра кнопок, чтобы при нажатии на кнопку фильтра изменять изображения из черно-белых в исходные цвета нужной категории.

Мои изображения правильно изменены на черно-белые. На данный момент мне удалось перевести кнопку в активное состояние, когда я нажимаю на нее, но она не остается в активном состоянии после щелчка, и мне не удается удалить черно-белые изображения на изображениях категории кнопок.

Я не уверен, правильно ли я выполнил фрагмент кода, поскольку он отображает ошибку.

 var container = document.getElementById('filters-button-group');

container.addEventListener('click', event => {

  var activeItem = container.querySelector('.button-selected');

  if (activeItem !== null) {
    activeItem.classList.remove('button-selected');
  }

  if (event.target === activeItem) {
    return;
  }

  event.target.classList.add('button-selected');
  $('#img').css('filter', 'none');
});

 button {
  /* BUTTON SET UP */
    border: 4px solid green;
    border-top: 0;
    border-right: 0;
  font-size: 10px;
  text-decoration: none;
  color: green;
  display: block;
  margin-bottom: 22px;
}

.button:active,
.button-selected {
  /* SELECTED */
  background: rgba(8, 140, 126, 50%);
  border: 4px solid green;
}

#portfolio { /* POSITION TOTAL PORTFOLIO ZONE WITH BUTTONS */
    text-align: center;
    background: transparent;
    position: absolute;
}

#portfolio img {
  /* --- IMAGES BLACK AND WHITE --- */
  filter: grayscale(100%) opacity(30%);
}

 <section id="portfolio">

<div class="button-group filters-button-group">

  <button class="button button-effect" data-filter=".A"><a href="#" class="opc-main-bg filter" >A</a></button>
  <button class="button button-effect" data-filter=".B"><a href="#" class="opc-main-bg filter" >B</a></button>
  <button class="button button-effect" data-filter=".C"><a href="#" class="opc-main-bg filter" >C</a></button>
  <button class="button button-selected" data-filter="*"><a href="#" class="selected opc-main-bg filter">ALL</a></button>

</div>

<div
<div class="A"><img src="http://fakeimg.pl/365x365/ff0000/" width="50%" height="auto">
  <div class="B"><img src="http://fakeimg.pl/365x365/ff0000/" width="50%" height="auto">
    <div class="C"><img src="http://fakeimg.pl/365x365/ff0000/" width="50%" height="auto">
    
</section>

Развернуть фрагмент

Ответ №1:

Использовать document.getElementsByClassName('filters-button-group') вместо document.getElementById('filters-button-group') because filters-button-group — это класс, а не идентификатор. вы можете получить доступ к его дочерним элементам в виде массива

проверьте это для справки: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Ответ №2:

В этом примере первые две фотографии относятся к группе «А», остальные фотографии — одна в группе. При нажатии кнопки она собирает все теги img с классом, указанным в атрибуте «data-filter» кнопки, и применяет или удаляет стиль.

 var container = document.querySelectorAll('.filters-button-group .button');

for (let i = 0; i < container.length; i  ) {
    container[i].addEventListener('click', function () {
        this.classList.toggle('button-selected');
        var x = document.querySelectorAll(this.getAttribute('data-filter')   ' img');
        var y = x[0].getAttribute('style');
        if (y) {
            for (var i = 0; i < x.length; i  ) {
                x[i].removeAttribute('style');
            }
        } else {
            for (var i = 0; i < x.length; i  ) {
                x[i].setAttribute('style', 'filter:none');
            }
        }
    });
}

// Button All -> add / remove effect on all images
var allFilterButt = document.querySelector('.filters-button-group .button-all');
var wrap = document.querySelector('#imgWrap');
var imgList = wrap.querySelectorAll('img');

allFilterButt.addEventListener('click', function () {
    var x = wrap.getAttribute('data-eff');
    if (x === 'off') {
        for (var i = 0; i < imgList.length; i  ) {
            imgList[i].setAttribute('style', 'filter:none');
        }

        for (var i = 0; i < container.length; i  ) {
            container[i].classList.add('button-selected');
        }

        wrap.setAttribute('data-eff', 'on');
    } else {
        for (var i = 0; i < imgList.length; i  ) {
            imgList[i].removeAttribute('style');
        }

        for (var i = 0; i < container.length; i  ) {
            container[i].classList.remove('button-selected');
        }

        wrap.setAttribute('data-eff', 'off');
    }
});

 button {
    /* BUTTON SET UP */
    border: 4px solid green;
    border-top: 0;
    border-right: 0;
    font-size: 10px;
    text-decoration: none;
    color: green;
    display: block;
    margin-bottom: 22px;
}

.button:active,
.button-selected {
    /* SELECTED */
    background: rgba(8, 140, 126, 50%);
    border: 4px solid green;
}

#portfolio {
    /* POSITION TOTAL PORTFOLIO ZONE WITH BUTTONS */
    text-align: center;
    background: transparent;
    position: absolute;
}

#portfolio img {
    /* --- IMAGES BLACK AND WHITE --- */
    filter: grayscale(100%) opacity(30%);
}

 <section id="portfolio">
    <div class="button-group filters-button-group">
        <button class="button button-effect opc-main-bg filter" data-filter=".A">A</button>
        <button class="button button-effect opc-main-bg filter" data-filter=".B">B</button>
        <button class="button button-effect opc-main-bg filter" data-filter=".C">C</button>
        <button class="button button-effect opc-main-bg filter" data-filter=".D">D</button>
        <button class="button button-effect opc-main-bg filter" data-filter=".E">E</button>
        <button class="button-all button-selected opc-main-bg filter selected" data-filter="*">ALL</button>
    </div>

    <div id="imgWrap" data-eff="off">
        <div class="A"><img
                src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_027_by_54ka.jpg"
                width="50%" height="auto"></div>
        <div class="A"><img
                src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_034_by_54ka.jpg"
                width="50%" height="auto"></div>
        <div class="B"><img
                src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_028_by_54ka.jpg"
                width="50%" height="auto"></div>
        <div class="C"><img
                src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_030_by_54ka.jpg"
                width="50%" height="auto"></div>
        <div class="D"><img
                src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_031_by_54ka.jpg"
                width="50%" height="auto"></div>
        <div class="E"><img
                src="https://blog.54ka.org/wp-content/uploads/2020/08/horses-on-summer-meadow_032_by_54ka.jpg"
                width="50%" height="auto"></div>
    </div>
</section>

Развернуть фрагмент

1. Ах да, извините, теперь я вижу некоторые ошибки, которые я допустил, когда вырезал свой код, чтобы упростить его…

2. И я также признаю свой недостаток знаний! Спасибо за ваше решение, оно работает в направлении того, чего я хотел! У меня все еще есть несколько проблем с этим, если вы не возражаете помочь мне немного больше: — У меня много изображений со свойствами фильтра данных, и когда я нажимаю на кнопку, она возвращает только одно из каждого цвета — в вашем решении вы можете нажать и активировать все кнопкив то же время я искал способ сделать активированным только один

3. Я обновил код. Кнопка «Все» теперь добавляет или удаляет эффект со всех изображений, а также активирует и деактивирует все кнопки

4. У меня все еще есть проблема, когда только одно изображение возвращается к цветам, если я умножаю изображения на ваш обновленный код. Исходит ли это от querySelector, который получает только первый, с которым он сталкивается?

5. Теперь я снова протестировал свой код, и он работает правильно! Пожалуйста, проверьте, где вы ошиблись при создании кнопки и изображения.