Как изменить 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');
});

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .