主页 / 问题 / 1191291
Accepted
Logos
Asked:2021-10-17 02:13:23 +0000 UTC2021-10-17 02:13:23 +0000 UTC

如何为数组中的每个元素添加一个唯一的类？

  • 772

我有许多元素都有自己独特的类，当单击按钮时，每个元素都必须添加自己的独特类。

是否可以使数组中的元素编号在添加的类中重复？j 元素编号在 left-member-[ j ]-awake 中重复

下面我试图介绍我想做的事情。

let allSleepingMember = document.querySelectorAll('.left-member-1, .left-member-2, .left-member-3, .left-member-4');

button.addEventListener('click', function() {

        for (let j = 0; j < allSleepingMember; j++) {
            allSleepingMember[j].classList.toggle('left-member-'[j]'-awake');
        }
});
javascript

2 个回答

  1. Best Answer

    正如已经正确指出的那样，重命名类，委婉地说，并不完全正确，最好为元素选择一个公共类。

    如果我们从条件集出发，则没有必要列出所有类。为了缩小选择范围，但同时找到所有或多或少合适的选择，通过属性指定选择器就足够了，在这种情况下 - [attr*=value]。CSS 中的一种“迷你正则表达式”。

    // Перебираем коллекцию элементов, найденных на основе селектора атрибутов
document.querySelectorAll('div[class*="left-member-"]').forEach(el => {
  // Устанавливаем список классов после замены нужного нам класса
  el.className = el.className.replace(/(left-member-[0-9]+)(?=$| )/gim, '$1-awake');
  // Выводим в консоль списки классов, читаем, любуемся изменениями
  console.info(el.textContent); console.log(el.className, '\n\n');
});
    <div class="left-member-1 first">1) + Тут два класса и нужный - в начале</div>
<div class="left-member-2">2) + Здесь всё как положено</div>
<div class="left-member">3) - Этот даже не найдётся - нет числового id</div>
<div class="left-member-4-awake">4) - Не берём - уже добавлено, что нужно</div>
<div class="five left-member-5">5) + Снова два класса. Нужный - в конце</div>
<div class="left-member-six">6) - Нашли, но под замену не подходит - не число</div>
<div class="left-member-7">7) + Тот, что нужен</div>

    切换（更改和添加很少）：

    document.querySelector('div.button').addEventListener('click', fClassRename);

function fClassRename() {
  // Перебираем коллекцию элементов, найденных на основе селектора атрибутов
  document.querySelectorAll('div[class*="left-member-"]').forEach(el => {
    /* Устанавливаем список классов после переименования нужного нам класса */
    // Если список содержит имя класса с окончанием -awake, тогда...
    if (/left-member-[0-9]+(?=-awake)/gim.test(el.className)) {
      // ... удаляем окончание -awake
      el.className = el.className.replace(/(left-member-[0-9]+)-awake/gim, '$1');
    } else {
      // ... иначе, добавляем окончание -awake
      el.className = el.className.replace(/(left-member-[0-9]+)(?=$| )/gim, '$1-awake');
    }
  });
}
    .button{display:inline-block;border-radius:4px;box-shadow:inset 0 0 0em 2px grey;padding:.5em 1.5em;transition:.4s ease-out;cursor:pointer}.button:hover{box-shadow:inset 0 0 1.5em 2px grey}

.button~div {
  margin: .5em 0; padding: .25em;
  box-shadow: inset 0 0 5px 0 blue;
}
div[class*="left-member-"][class*="-awake"] {
  box-shadow: 0 0 5px 0 red;
}
    <div class="button">Change classnames</div>
<div class="left-member-1 first">1) + Тут два класса и нужный - в начале</div>
<div class="left-member-2">2) + Здесь всё как положено</div>
<div class="left-member">3) - Этот даже не найдётся - нет числового id</div>
<div class="left-member-4-awake">4) - Не берём - уже добавлено, что нужно</div>
<div class="five left-member-5">5) + Снова два класса. Нужный - в конце</div>
<div class="left-member-six">6) - Нашли, но под замену не подходит - не число</div>
<div class="left-member-7">7) + Тот, что нужен</div>

    • 3

  2. 或多或少通用的解决方案：

    最好将所有元素与某种通用类结合起来，这样更容易搜索，而不是在代码中列出你的类——这不好

    <div class = "left-member left-member-1"></div>
<div class = "left-member left-member-2"></div>
<div class = "left-member left-member-3"></div>
<div class = "left-member left-member-4"></div>
<div class = "left-member left-member-5"></div>
<div class = "left-member left-member-6"></div>
<div class = "left-member left-member-17"></div>

// найти все элементы заданного класса
let allSleepingMember = document.querySelectorAll('.left-member');

// обработать все найденные элементы
for (let obj of allSleepingMember) {

    // проверить входит ли в список классов класс заданного формата
    const found = obj.classList.value.match(/left-member-\d+/i);
    
    if (found !== null)
    {
        // получить информацию из найденного класса
        const id = found[0].substring(found.index)
        
        // заменить классы
        obj.classList.replace(found[0], `left-member-${id}-awake`);
    }
}
    • 1

相关问题