使用过滤器按钮从黑白到彩色的组合图像

Question

我正在尝试使用按钮过滤器制作一个投资组合，以便在单击按钮过滤器时将图像从黑白更改为正确类别的原始颜色。

我的图像已正确更改为黑白。 现在，当我单击它时，我设法使按钮变为活动状态，但单击后它并没有保持活动状态，我无法设法删除按钮类别图像上的黑白。

我不确定我是否正确执行了代码 sn-p，因为它显示错误。

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>

Answer 1

使用 document.getElementsByClassName('filters-button-group') 而不是document.getElementById('filters-button-group')，因为filters-button-group 是一个类而不是id。您可以将其子项作为数组访问

检查此以供参考： https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Answer 2

在此示例中，前两张照片来自“A”组，其他照片是一组中的一张。当一个按钮被点击时，它会收集按钮的“data-filter”属性中的所有img标签，并应用或删除一个样式。

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>