点击切换颜色

Question

我有一个包含 <a href> 的列表，我正在尝试设置点击时的颜色。

<a id="mls-category-terms" class="621">Test 1</a>
<a id="mls-category-terms" class="622">Test 2</a>
<a id="mls-category-terms" class="639">Test 3</a>
<a id="mls-category-terms" class="641">Test 4</a>

我使用以下代码实现了这一点：

const homeCategoryList = document.querySelectorAll('#mls-category-terms');
for (let i = 0; i < homeCategoryList.length; i++) {
    homeCategoryList[i].addEventListener('click', () => homeCategoryList[i].setAttribute('style', 'background: #3d5b9a;color: #fff;'));
}

这行得通，但是通过这种方式，当我点击另一个 link 时，颜色也会显示在那个 link 上，但它也会保留在前一个 link 上。

所以，完美的结果是当用户点击一个 link 它会得到不同的颜色，但是如果从那个列表中点击另一个 link 前一个将被重置并且最后点击的将获得颜色。

这是当前结果的图像：https://prnt.sc/12sr23w

希望这是有道理的。我是 JavaScript.

的新手

Answer 1

您需要跟踪上一个获得样式的样式并相应地删除它：

const homeCategoryList = document.querySelectorAll('#mls-category-terms');
let PREV=0;
for (let i = 0; i < homeCategoryList.length; i++) {
    homeCategoryList[i].addEventListener('click', () => {
      homeCategoryList[PREV].removeAttribute('style');
      homeCategoryList[i].setAttribute('style', 'background: #3d5b9a;color: #fff;')
      PREV=i;
    });
}

<a id="mls-category-terms" class="621">Test 1</a>
<a id="mls-category-terms" class="622">Test 2</a>
<a id="mls-category-terms" class="639">Test 3</a>
<a id="mls-category-terms" class="641">Test 4</a>

Answer 2

每次单击都会删除之前设置的样式，然后再将样式添加到新单击的元素。

const homeCategoryList = document.querySelectorAll('#mls-category-terms');
homeCategoryList.forEach(h => h.addEventListener('click', () => toggleColor(h)));

function toggleColor(e) {
  homeCategoryList.forEach(f => f.setAttribute('style', 'background:;color:;'));
  e.setAttribute('style', 'background: #3d5b9a;color: #fff;');
}

<a id="mls-category-terms" class="621">Test 1</a>
<a id="mls-category-terms" class="622">Test 2</a>
<a id="mls-category-terms" class="639">Test 3</a>
<a id="mls-category-terms" class="641">Test 4</a>

Answer 3

如评论中所述，ID 应该是唯一的，因此 mls-category-terms 应该是 CSS class。一旦你解决了这个问题，你可以这样做：

const links = document.querySelectorAll('.mls-category-terms');

links.forEach(link => {
  link.addEventListener('click', () => {
    links.forEach(l => l.classList.remove('active')); // remove the 'active' class from all links
    link.classList.add('active'); // add the 'active' class only to the clicked one
  })
});

.mls-category-terms.active {
  background-color: #3d5b9a;
  color: #fff;
}

<a id="link1" class="mls-category-terms 621">Test 1</a>
<a id="link2" class="mls-category-terms 622">Test 2</a>
<a id="link3" class="mls-category-terms 639">Test 3</a>
<a id="link4" class="mls-category-terms 641">Test 4</a>

Answer 4

这实际上可以用 CSS :focus 伪 class:

.mls-category-terms:link {color:#000}
.mls-category-terms:visited {color:#000}
.mls-category-terms:hover {color:#FF00FF}
.mls-category-terms:active {color:#0000FF}
.mls-category-terms:focus {
  background: #3d5b9a;
  color: #fff;
}

<a class="mls-category-terms 621" href="#">Test 1</a>
<a class="mls-category-terms 622" href="#">Test 2</a>
<a class="mls-category-terms 639" href="#">Test 3</a>
<a class="mls-category-terms 641" href="#">Test 4</a>

这是我的首选方法，但正如下面的所示，因为 :focus 伪 class 会失去焦点，无论其他什么元素被点击。因此，对于大多数用例，使用 .active class 和 Javascript 是最好的。

另请注意，mls-category-terms id 已变成 class。

点击切换颜色

Toggle color on click

javascript

toggle