Изменение логики взаимодействия javascript с флажками html

В настоящее время флажки делают как таковые.

Ruby Red изменяет первый svg Forest Green изменяет второй svg Ocean Blue изменяет третий svg

То, что я хотел бы сделать, это сделать его зависимым от того, что выбрано в первую очередь. Поэтому, если сначала выбрать Ocean Blue, он изменит первый svg. Если бы второй был Ruby Red, это изменило бы второй svg.

Если есть также способ сделать это, когда svgs имеют уникальные имена классов, а не все «svg-icon», это действительно помогло бы мне со структурой.

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

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

const checkboxes = document.querySelectorAll('.checkbox');
const svgs = document.querySelectorAll('.svg-icon');
let selectedIndices = [];

checkboxes.forEach((checkbox, index) => {
  checkbox.addEventListener('click', function() {
    const className = this.value.replace(/[_\d]/g, '');
    const targetIndex = selectedIndices.indexOf(index);
    if (this.checked) {
      if (targetIndex === -1) {
        selectedIndices.push(index);
        svgs[index].querySelector('path').setAttribute('class', className);
      }
    } else {
      if (targetIndex !== -1) {
        selectedIndices.splice(targetIndex, 1);
        svgs[index].querySelector('path').removeAttribute('class');
      }
    }
  });
});

.svg-icon {
  width: 100px;
  height: 100px;
}

.rubyRed {
  fill: #9b111e;
}

.forestGreen {
  fill: #228b22;
}

.oceanBlue {
  fill: #00E7FF;
}

<input type = "checkbox" class = "checkbox" value = "rubyRed_1">
<label>Ruby Red</label>

<input type = "checkbox" class = "checkbox" value = "forestGreen_2">
<label>Forest Green</label>

<input type = "checkbox" class = "checkbox" value = "oceanBlue_3">
<label>Ocean Blue</label>

<svg class = "svg-icon" viewBox = "0 0 20 20">
    <path fill = "#000000" d = "M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10s10-4.5,10-10C20,4.5,15.5,0,10,0z M15.3"/>
  </svg>

<svg class = "svg-icon" viewBox = "0 0 20 20">
    <path fill = "#000000" d = "M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10s10-4.5,10-10C20,4.5,15.5,0,10,0z M15.3"/>
  </svg>

<svg class = "svg-icon" viewBox = "0 0 20 20">
    <path fill = "#000000" d = "M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10s10-4.5,10-10C20,4.5,15.5,0,10,0z M15.3"/>
  </svg>

В основном я не уверен, с чего начать или какая логика лучше всего подходит для этих взаимодействий.

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

— 28.06.2023 06:57

javascript html css

28.06.2023 05:14

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вот мои полные решения, есть некоторые комментарии, которые объясняют, что я сделал.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .svg-icon {
        width: 100px;
        height: 100px;
      }

      .rubyRed {
        fill: #9b111e;
      }

      .forestGreen {
        fill: #228b22;
      }

      .oceanBlue {
        fill: #00E7FF;
      }
    </style>
  </head>
  <body>
    <input type = "checkbox" class = "checkbox" value = "rubyRed_1">
    <label>Ruby Red</label>
    <input type = "checkbox" class = "checkbox" value = "forestGreen_2">
    <label>Forest Green</label>
    <input type = "checkbox" class = "checkbox" value = "oceanBlue_3">
    <label>Ocean Blue</label>
    <div id = "svg-wrapper">
      <svg class = "svg-icon" viewBox = "0 0 20 20">
        <path fill = "#000000" d = "M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10s10-4.5,10-10C20,4.5,15.5,0,10,0z M15.3" />
      </svg>
      <svg class = "svg-icon" viewBox = "0 0 20 20">
        <path fill = "#000000" d = "M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10s10-4.5,10-10C20,4.5,15.5,0,10,0z M15.3" />
      </svg>
      <svg class = "svg-icon" viewBox = "0 0 20 20">
        <path fill = "#000000" d = "M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10s10-4.5,10-10C20,4.5,15.5,0,10,0z M15.3" />
      </svg>
    </div>
    <script>
      const checkboxes = document.querySelectorAll('.checkbox');
      const svgWrapper = document.querySelector('#svg-wrapper');
      const amountOfSvgs = 3
      const selectedIndices = new Map(); // we can use a map to store the position and state
      const availableIndices = [] // store which svgs are free
      for (let i = amountOfSvgs - 1; i >= 0; i--) { // setup our array [2, 1, 0]
        availableIndices.push(i)
      }
      checkboxes.forEach((checkbox, index) => {
        checkbox.addEventListener('click', function() {
          const className = this.value.replace(/[_\d]/g, '');
          const svgPosition = selectedIndices.get(index) // we are using index as an identifier
          if (this.checked) {
            if (!Number.isInteger(svgPosition)) { // isInteger here because 0 evaluates to false
              const position = availableIndices.pop();
              console.info(`index: ${index} pos: ${position}`)
              selectedIndices.set(index, position) // we store the position of which svg we changed
              svgWrapper.children[position].querySelector('path').setAttribute('class', className);
            }
          } else {
            if (Number.isInteger(svgPosition)) {
              svgWrapper.children[svgPosition].querySelector('path').removeAttribute('class');
              availableIndices.push(svgPosition)
              selectedIndices.delete(index)
              // sort the list so we take up starting from index 0
              availableIndices.sort((a, z) => z - a)
            }
          }
        });
      });
    </script>
  </body>
</html>

Если есть также способ сделать это, когда svgs имеют уникальный класс имена вместо всех "svg-icon", которые действительно помогли бы мне с состав.

Что я сделал, так это создал оболочку div и поместил в нее все svg, а затем вызвал ее с детьми.

const svgWrapper = document.querySelector('#svg-wrapper');
// code here
svgWrapper.children[position].querySelector('path').setAttribute('class', className);

То, что я хотел бы сделать, это сделать его зависимым от того, что выбрано первый. Таким образом, если сначала выбрать Ocean Blue, он изменит первый svg. Если бы второй был Ruby Red, это изменило бы второй svg.

Здесь я использовал карту для хранения того, какой SVG показывался и в какой позиции SVG.

const selectedIndices = new Map(); // we can use a map to store the position and state

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

Для этого я создал массив, в котором хранятся бесплатные SVG. Затем мы можем отслеживать, куда добавить SVG при следующем щелчке.

const availableIndices = [] // store which svgs are free
for (let i = amountOfSvgs - 1; i >= 0; i--) { // setup our array [2, 1, 0]
    availableIndices.push(i)
}

Я предварительно заполнил доступные позиции, поэтому мы можем просто взять первую доступную позицию (0).

28.06.2023 06:46

Вот мое решение.

Нажмите или удалите имя класса из массива result.

Сбрасывать класс svgs по результату при каждом нажатии флажков.

const checkboxes = document.querySelectorAll(".checkbox");
const svgs = document.querySelectorAll(".svg-icon");
const result = [];
const selected = ({ target }) => {
  const className = target.value.replace(/[_\d]/g, "");
  if (target.checked) {
    result.push(className);
  } else {
    result.splice(result.indexOf(className), 1);
  }
  svgs.forEach((elem, i) => {
    const path = elem.querySelector("path");
    path.classList.remove(...path.classList);
    if (result[i]) path.classList.add(result[i]);
  });
};

checkboxes.forEach((checkbox) => {
  checkbox.checked = false;
  checkbox.addEventListener("click", selected);
});

.svg-icon {
  width: 100px;
  height: 100px;
}

.rubyRed {
  fill: #9b111e;
}

.forestGreen {
  fill: #228b22;
}

.oceanBlue {
  fill: #00E7FF;
}

<label><input type = "checkbox" class = "checkbox" value = "rubyRed_1">Ruby Red</label>
<label><input type = "checkbox" class = "checkbox" value = "forestGreen_2">Forest Green</label>
<label><input type = "checkbox" class = "checkbox" value = "oceanBlue_3">Ocean Blue</label>
<svg class = "svg-icon" viewBox = "0 0 20 20">
        <path fill = "#000000" d = "M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10s10-4.5,10-10C20,4.5,15.5,0,10,0z M15.3" />
    </svg>
<svg class = "svg-icon" viewBox = "0 0 20 20">
        <path fill = "#000000" d = "M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10s10-4.5,10-10C20,4.5,15.5,0,10,0z M15.3" />
    </svg>
<svg class = "svg-icon" viewBox = "0 0 20 20">
        <path fill = "#000000" d = "M10,0C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10s10-4.5,10-10C20,4.5,15.5,0,10,0z M15.3" />
    </svg>

28.06.2023 08:21

Другие вопросы по теме

Изменение логики взаимодействия javascript с флажками html

Как я могу переместить одну границу вниз

Инвертировать html-ленту «свяжитесь с нами», когда направления rtl

РЕШЕНО Радиокнопки STAR RATING работают справа налево, а не слева направо

CSS - ширина 100% при наведении, несмотря на то, что для элемента задана другая ширина

Как я могу создать блок 16x9 с двумя блоками 16x9, расположенными рядом с ним, с заголовками?

Как я могу написать пробел между символами с помощью Javascript?

Добавьте «флажок» в строку политики. Woocommerce, тема-шаблон Botiga

Невозможно прокрутить до конца контейнера div

Как заставить текст обтекать по ширине изображения?

Изменение логики взаимодействия javascript с флажками html

Ответы 2

Другие вопросы по теме

Похожие вопросы