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

@Aziret · Регистрация: 12.05.2017

Студворк — интернет-сервис помощи студентам

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

HTML5
1
2
3
4
5
<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 формате:

HTML5
1
2
3
4
5
6
   <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 "/>

Нужно сделать так, чтобы при нажатии на одну из категорий, скрипт сравнивал

HTML5
1
value

кнопки и

HTML5
1
data-id polygon

, если они совпадают, то задать нужные стили. Есть скрипт который находит совпадения и выводит все нормально, но он ищет до первого совпадения, а мне нужно все совпадения вот скрипт:

JavaScript
1
2
3
4
5
6
7
8
9
10
var cats = document.querySelector(".categories"),
        click = function click(e) {
            var el = document.querySelector(".fil0[data-id=\"" + e.target.value + "\"]");
            if (el) {
                console.log(el);
            }
        };
    [].forEach.call(cats.children, function (e) {
        return e.addEventListener("click", click);
    });

@j2FunOnly · 25.01.2018, 08:45

Сообщение от Aziret

но он ищет до первого совпадения

Ну так всё правильно: Document.querySelector возвращает первый найденный элемент.
Чтобы получить коллекцию элементов используйте Document.querySelectorAll.

@Aziret · 25.01.2018, 09:09 **[ТС]**

Спасибо Document.querySelectorAll находит все совпадения. Теперь как применить стили к найденным совпадения скажем изменить их background скрипт

JavaScript
1
el.css('fill', 'red');

показывает ошибку в консоли

@Balanaar · 25.01.2018, 09:34

Похоже, что вы пытаетесь применить метод .css() из jQuery. Если JQ у вас подключён, то так:

JavaScript
1
$(el).css('fill', 'red');

Если нет:

JavaScript
1
el.style.fill = 'red';

@Aziret · 25.01.2018, 09:38 **[ТС]**

Спасибо все сработало. Теперь как вернуть в исходное положение т.е при нажатии на другую категорию нажатая до этого категория вернулась в исходное положение, новое приняла новые стили т.е

JavaScript
1
$(el).css('fill', 'red');

эти

@Balanaar · 25.01.2018, 09:47

Самое простое - сбрасывать стиль у всех элементов на дефолтный, а затем уже назначать новый стиль кликнутому элементу:
https://codepen.io/anon/pen/PErzzg

HTML5
1
2
3
4
5
6
<p>КЛИК!</p>
<p>КЛИК!</p>
<p>КЛИК!</p>
<p>КЛИК!</p>
<p>КЛИК!</p>
<p>КЛИК!</p>

JavaScript
1
2
3
4
5
6
7
8
9
var elems = document.getElementsByTagName('p');
for (var i = 0; i < elems.length; i++) {
  elems[i].onclick = function() {
    for (var j = 0; j < elems.length; j++) {
      elems[j].style.color = 'unset';
    }
    this.style.color = 'red';
  }
}

С помощью jQuery:

JavaScript
1
2
3
4
$('p').on('click', function() {
  $('p').css('color', 'unset');
  $(this).css('color', 'red');
});

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ