Как найти, какие html-элементы имеют недавно измененный цвет фона, используя javascript

ProgramBox

Как найти, какие html-элементы имеют недавно измененный цвет фона, используя javascript

Post author:admin
Запись опубликована:2 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #css-selectors

#javascript #HTML #css-селекторы

Вопрос:

Просто хочу получить совет о том, как я мог бы поступить с этой частью моего кода:

В моем коде я случайным образом изменил цвет фона для множества разных divs, и единственное, что есть в divs, — это буква (рабочая) Затем я хочу вернуть, какие разделы были изменены, чтобы я мог отслеживать, нажимает ли пользователь на них и т.д.

Как я могу найти, какие элементы были «выбраны»?

Код пока:

 function generatePattern() {
    let key = document.getElementsByClassName("keyboard-letter");
    let number = document.getElementsByClassName("keyboard-number");
    
    console.log(key);

    for (let i = 0; i < key.length; i  ) {
        let boolean = Math.random() >= 0.75;

        if (boolean == true) {
            key[i].style.backgroundColor = "white";
            key[i].style.color = "black";
        } else if (boolean == false) {
            key[i].style.backgroundColor = "black";
            key[i].style.color = "white";
        };
    }
}

(игнорируйте числовую переменную)

Я пробовал с помощью query selector, хотя я не смог найти конкретный пример того, как компоновать синтаксис.

1. Почему вы просто не сохраняете их в массиве? Также добавление и удаление класса было бы намного проще.

2. Я пытался добавлять и удалять классы, но у меня уже есть класс для них, поэтому я не знаю, как добавить класс, когда он у меня уже есть.

3. developer.mozilla.org/en-US/docs/Web/API/Element/classList

Ответ №1:

ос, я могу отслеживать, нажимает ли пользователь на них и т. Д

Если вам нужно знать, когда пользователь нажимает на элементы, просто используйте прослушиватель событий, подобный такому:

 document.getElementsByClassName("keyboard-letter").addEventListener("click", function() {

     /*Do Whatever you need to do when the user clicks the element*/

})

document.getElementsByClassName("keyboard-number").addEventListener("click", function() {

     /*Do Whatever you need to do when the user clicks the element*/

})

Ответ №2:

Итак, поместите элемент в массив

 function generatePattern() {
    let key = document.getElementsByClassName("keyboard-letter");
    let number = document.getElementsByClassName("keyboard-number");
    
    var activeElems = []

    for (let i = 0; i < key.length; i  ) {
        let boolean = Math.random() >= 0.75;
        var elem = key[i];

        if (boolean == true) {
            elem.style.backgroundColor = "white";
            elem.style.color = "black";
            activeElems.push(elem);
        } else {
            elem.style.backgroundColor = "black";
            elem.style.color = "white";
        };
    }

  console.log(activeElems);
}

Код можно было бы сделать намного чище, просто переключив класс.

 function generatePattern() {
  const keys = document.querySelectorAll(".keyboard-letter");

  const activeElems = []

  keys.forEach(function (elem) {
    const isActive = Math.random() >= 0.75;
    elem.classList.toggle('active', isActive);
    if (isActive) activeElems.push(elem);
  });
  
  console.log(activeElems);
    
}

generatePattern()

 div.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 40px);
   grid-gap: 0px;
}

div.keyboard-letter {
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  width: 40px;
  height: 40px;
  border: 1px solid #C0C0C0;
  color: white;
  background: black;
}

div.keyboard-letter.active {
  color: black;
  background: white;
}

 <div class="wrapper">
  <div class="keyboard-letter">1</div>
  <div class="keyboard-letter">2</div>
  <div class="keyboard-letter">3</div>
  <div class="keyboard-letter">4</div>
  <div class="keyboard-letter">5</div>
  <div class="keyboard-letter">6</div>
  <div class="keyboard-letter">7</div>
  <div class="keyboard-letter">8</div>
  <div class="keyboard-letter">9</div>
  <div class="keyboard-letter">10</div>
  <div class="keyboard-letter">11</div>
  <div class="keyboard-letter">12</div>
  <div class="keyboard-letter">13</div>
  <div class="keyboard-letter">14</div>
  <div class="keyboard-letter">15</div>
  <div class="keyboard-letter">16</div>
  <div class="keyboard-letter">17</div>
  <div class="keyboard-letter">18</div>
  <div class="keyboard-letter">19</div>
  <div class="keyboard-letter">20</div>

</div>

Ответ №3:

Сначала вам нужно добавить mutation observer для вашего контейнера и немного изменить код, чтобы изменить стиль с помощью setAttribute

 // call this function onload
function startOb(params) {
            const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
            // target container to watch     
            const list = document.querySelector(`#container`);
            // options
            const config = {
                attributes: true,
                childList: true,
                characterData: true,
                subtree: true,
            };
            // instance
            const observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {

                    if (mutation.type === "attributes") {
                        console.log("mutation =", mutation);
                        console.log(`The `${mutation.attributeName}` attribute was modified.`);
                        // console.log("list style =", list.style);
                        
                    }
                });
            });
            observer.observe(list, config);
        }



          function generatePattern() {
            let key = document.getElementsByClassName("keyboard-letter");
            let number = document.getElementsByClassName("keyboard-number");

            console.log(key);

            for (let i = 0; i < key.length; i  ) {
                let boolean = Math.random() >= 0.75;

                if (boolean == true) {
                    key[i].setAttribute(`style`, `backgroundColor: white; color: black`);
                    
                } else if (boolean == false) {
                    key[i].setAttribute(`style`, `backgroundColor: black; color: white`);
                };
            }
        }

Ответ №4:

Объяснение: active это класс CSS, который изменяет background на black и color на white . Теперь я использовал кнопку, чтобы вы могли видеть, как происходят изменения. Всякий раз, когда нажимается кнопка, цикл forEach выполняется для каждого .keyboard-letter элемента. Когда check значение false, active класс должен быть добавлен. Таким образом, он проверяет, присутствует ли он уже. Если он уже присутствует, ничего не происходит, но когда он отсутствует, active класс добавляется, и этот элемент помещается в массив activeElems . Что происходит, когда check верно, будет понятно.

Нажмите кнопку, чтобы узнать, какие элементы изменили свой CSS :

 var activeElems;
var firstRun = true;

function generatePattern() {

  activeElems = [];
  const keys = document.querySelectorAll(".keyboard-letter");
  keys.forEach(function(elem) {
    const check = Math.random() >= 0.75;
    if (!check) {
      if (!elem.classList.contains("active")) {
        elem.classList.add("active");
        activeElems.push(elem);
      }
    } else {
      if (elem.classList.contains("active")) {
        elem.classList.remove("active");
        activeElems.push(elem);
      }
    }
  });
  if(firstRun == true) firstRun = false;
  else{
    console.log(activeElems);
    console.log(activeElems.length);
  }
}

generatePattern();

 * {
  box-sizing: border-box;
}

div.wrapper {
  display: flex;
  width: 200px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

div.keyboard-letter {
  width: 40px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #000;
}

.active {
  color: #fff;
  background: #000;
}

 <div class="wrapper">
  <div class="keyboard-letter">1</div>
  <div class="keyboard-letter">2</div>
  <div class="keyboard-letter">3</div>
  <div class="keyboard-letter">4</div>
  <div class="keyboard-letter">5</div>
  <div class="keyboard-letter">6</div>
  <div class="keyboard-letter">7</div>
  <div class="keyboard-letter">8</div>
  <div class="keyboard-letter">9</div>
  <div class="keyboard-letter">10</div>
  <div class="keyboard-letter">11</div>
  <div class="keyboard-letter">12</div>
  <div class="keyboard-letter">13</div>
  <div class="keyboard-letter">14</div>
  <div class="keyboard-letter">15</div>
  <div class="keyboard-letter">16</div>
  <div class="keyboard-letter">17</div>
  <div class="keyboard-letter">18</div>
  <div class="keyboard-letter">19</div>
  <div class="keyboard-letter">20</div>
  <button onClick="generatePattern()">Button</button>
</div>