Question

我正在构建一个滑块，无法弄清楚如何将课程从第一个三个孩子移到下一个，等等。

我正在尝试将活动类移至下一个“数据组”

<ul>
    <li class="active" data-group="1">Item 1</li>
    <li class="active" data-group="1">Item 2</li>
    <li class="active" data-group="1">Item 3</li>
    <li data-group="2">Item 4</li>
    <li data-group="2">Item 5</li>
    <li data-group="2">Item 6</li>
    <li data-group="3">Item 7</li>
    <li data-group="3">Item 8</li>
    <li data-group="3">Item 9</li>
</ul>

我在上一个/下一个按钮上附加了一个事件监听器。只是不确定从这里要去哪里。

Answer 1

有点逻辑，您可以通过获取属性document.getElementById('next').addEventListener('click', e => { // Get the max group number let max = Math.max(...[...document.querySelectorAll(`[data-group]`)].map(el => parseInt(el.getAttribute('data-group')))); // Get the current group let group = parseInt(document.querySelector('.active').getAttribute('data-group')); // Remove the active attribute [...document.querySelectorAll(`[data-group="${group}"]`)].forEach(el => el.classList.remove('active')); // Increment the group then compare if the group value is larger than the max // If it is set the group to 1 if(++group > max) group = 1; // Add the active class to the proper group [...document.querySelectorAll(`[data-group="${group}"]`)].forEach(el => el.classList.add('active')); })并进行一些计算来查看数据，从而移动活动值：

.active {color:red;}

<ul>
  <li class="active" data-group="1">Item 1</li>
  <li class="active" data-group="1">Item 2</li>
  <li class="active" data-group="1">Item 3</li>
  <li data-group="2">Item 4</li>
  <li data-group="2">Item 5</li>
  <li data-group="2">Item 6</li>
  <li data-group="3">Item 7</li>
  <li data-group="3">Item 8</li>
  <li data-group="3">Item 9</li>
</ul>
<button id="next">Next</button>

<ul>
<li data-group="1" id="item1">Item 1</li>
<li data-group="1" id="item2">Item 2</li>
<li data-group="1" id="item3">Item 3</li>
<li data-group="2" id="item4">Item 4</li>
<li data-group="2" id="item5">Item 5</li>
<li data-group="2" id="item6">Item 6</li>
<li data-group="3" id="item7">Item 7</li>
<li data-group="3" id="item8">Item 8</li>
<li data-group="3" id="item9">Item 9</li>
</ul>

Answer 2

您可以做到

get-command get-service,get-process | foreach-object {& $_}

Answer 3

如果您使用id并为id ex设置类或样式，那么

这很容易。（getElementForId）。

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

然后创建一个函数 document.getElementById（the_id_to_change）.style.property =新样式

喜欢

{{1}}

Answer 4

您可以获取所有li的值，然后检查该属性是否符合您的偏好，对于li的每个具有属性data-group的元素。我们检查属性的值是否等于我们想要的值。然后，我们将该类添加为活动类，否则将其删除。使用Array.prototype.slice.call(allLi)将nodeList转换为数组。

还添加一个按钮，其值将递增，因此您的代码将变为

let i = 1;
document.querySelector('#next').addEventListener("click", () => {
  i++
  let allLi = document.querySelectorAll('li[data-group]'); // get all li with the attribute data-group
  Array.prototype.slice.call(allLi).forEach((elem, _) => { // for every li element
    if (elem.getAttribute("data-group") == i) { // check if the attribute = the value we want on one click
      elem.classList.add("active") // add to the element's class
    } else {
      elem.classList.remove("active") // or else, remove the element's class
    }
  });
});

.active {
  color: red
}

<ul>
  <li class="active" data-group="1">Item 1</li>
  <li class="active" data-group="1">Item 2</li>
  <li class="active" data-group="1">Item 3</li>
  <li data-group="2">Item 4</li>
  <li data-group="2">Item 5</li>
  <li data-group="2">Item 6</li>
  <li data-group="3">Item 7</li>
  <li data-group="3">Item 8</li>
  <li data-group="3">Item 9</li>
</ul>
<button id="next">next</button>

Answer 5

document.querySelectorAll将返回与给定查询匹配的所有元素的列表。您可以像这样使用它：

for (const element of document.querySelectorAll('[data-group="2"]')) {
  element.classlist.add('active')
}

您当然需要执行类似的操作来删除以前的“活动”类。可能看起来像这样：

// Run BEFORE switching to data-group 2
for (const element of document.querySelectorAll('.active')) {
  element.sclassList.remove('active')
}

如何基于属性移动类

5 个答案: