Как изменить bg при нажатии на кнопку?

261

25 января 2018, 21:08

Такая проблема. Есть кнопки категорий, у которых есть своё значение:

<div class="categories">
    <button type="button" value="8" class="category">8 Категория</button>
    <button type="button" value="2" class="category">2 Категория</button>
    <button type="button" value="3" class="category">3 Категория</button>
</div>

и есть изображение в SVG формате:

    <polygon class="fil0 str0" data-id="8" points="6584,19891 6584,23682 10061,23682 10061,19891 "/>  
    <polygon class="fil0 str0" data-id="2" points="6584,19891 6584,23682 10061,23682 10061,19891 "/> 
    <polygon class="fil0 str0" data-id="3" points="6584,19891 6584,23682 10061,23682 10061,19891 "/>  
    <polygon class="fil0 str0" data-id="8" points="6584,19891 6584,23682 10061,23682 10061,19891 "/>  
    <polygon class="fil0 str0" data-id="2" points="6584,19891 6584,23682 10061,23682 10061,19891 "/> 
    <polygon class="fil0 str0" data-id="3" points="6584,19891 6584,23682 10061,23682 10061,19891 "/>

Нужно сделать так, чтобы при нажатии на одну из категорий, скрипт сравнивал value кнопки и data-id polygon, если они совпадают, то задать нужные стили. Есть скрипт который находит все совпадения:

var cats = document.querySelector(".categories"),
        click = function click(e) {
            var el = document.querySelectorAll(".fil0[data-id=\"" + e.target.value + "\"]");
            if (el) {
                console.log(el);
            }
        };
    [].forEach.call(cats.children, function (e) {
        return e.addEventListener("click", click);
    });

Теперь как применить нужные стили к найденным polygon?

Answer 1

let cats = document.querySelector(".categories"), 
    click = e => { 
      let el = document.querySelector(`polygon[data-id="${e.target.value}"]`); 
      if (el) { 
        console.log(el) 
      } 
    }; 
[].forEach.call(cats.children, e => e.addEventListener("click", click));

<div class="categories"> 
    <button type="button" value="8" class="category">Category 8</button> 
    <button type="button" value="12" class="category">Category 12</button> 
</div> 
 
<polygon data-id="8" points="6584,19891 6584,23682 10061,23682 10061,19891 "/> 
<polygon data-id="12" points="6584,19891 6584,23682 10061,23682 10061,19891 "/>

Answer 2

Если один полигон:

        document.querySelector('.category').addEventListener('click', e => {
            let polygon = document.querySelector('polygon').getAttribute('data-id');
            if(e.target.getAttribute('value') === polygon) console.log('success');
        })

Answer 3

Если хочешь при клике установить цвет заливки:

 var cats = document.querySelector(".categories"),
            click = function click(e) {
                var el = document.querySelectorAll(".fil0[data-id=\"" + e.target.value + "\"]");
                if (el) {
                    el.style.fill = 'здесь цвет заливки';
                }
            };
        [].forEach.call(cats.children, function (e) {
            return e.addEventListener("click", click);
        });