时间戳

首页 > 解决方案 > 单击时如何重置所有其他按钮的背景颜色并突出显示选定的按钮？

javascript - 单击时如何重置所有其他按钮的背景颜色并突出显示选定的按钮？

问题描述

当我单击一个按钮并更改所选按钮的颜色时，我正在尝试重置所有背景颜色。一开始我希望一个按钮的背景颜色为深灰色，如片段所示，当我单击另一个按钮时，所有按钮将重置为白色，单击的按钮将变为深灰色。我怎样才能做到这一点？

现在，当我单击另一个按钮时，什么也没有发生。

这是我的代码，有什么问题？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>

        /* Style the buttons */
        .portfolio-buttons {
            border: none;
            outline: none;
            padding: 12px 16px;
            /* background-color: white; */
            cursor: pointer;
        }

        .portfolio-buttons-normal {
            background-color: white;
        }

        .portfolio-buttons:hover {
            background-color: #ddd;
        }

        .portfolio-buttons-active {
            background-color: #666;
            color: white;
        }
    </style>
</head>

<body>
    <div id="myBtnContainer">
        <button class="portfolio-buttons portfolio-buttons-normal portfolio-buttons-active">Show
            all</button>
        <button class="portfolio-buttons portfolio-buttons-normal" >.html</button>
        <button class="portfolio-buttons portfolio-buttons-normal">.css</button>
        <button class="portfolio-buttons portfolio-buttons-normal" >.js</button>
        <button class="portfolio-buttons portfolio-buttons-normal" >.java</button>
        <button class="portfolio-buttons portfolio-buttons-normal" >.py</button>
    </div>
    <script>

        
        function changeClass(button, classRef) {

            button.classList.forEach((className) => {

                if (className.startsWith("portfolio-buttons-active")) button.classList.remove(className);

            });

            console.log(classRef);
            button[classRef].classList.add("portfolio-buttons-active");
        }


        document.querySelectorAll("portfolio-buttons").forEach((button, buttonNum) => {
            button.addEventListener("click", function () {
                document.querySelectorAll(".portfolio-buttons-normal").forEach((item) => {
                    changeClass(item, buttonNum);
                    console.log(buttonNum);
                });
            });
        });
    </script>
</body>

</html>

标签： javascripthtmlcss

解决方案

您在选择按钮.的位置缺少 a 。querySelectorAll所以它正在寻找元素portfolio-buttons而不是类。

该classList接口有一个contains方法可以检查元素上是否存在类。所以不需要循环检查className字符串。同样根本不需要，如果类不在元素上，则不会删除任何内容。

对于重置按钮，给它一种方法来识别它的唯一性。在上面的例子中，我给了它一个value带有字符串的属性。单击时检查是否是单击的重置按钮，并且根本不添加新的活动类。

const buttons = document.querySelectorAll(".portfolio-buttons");
buttons.forEach((button) => {
  button.addEventListener('click', event => {
    buttons.forEach(button => button.classList.remove('portfolio-buttons-active'));
    if (button.value !== 'reset') {
      button.classList.add('portfolio-buttons-active');
    }
  });
});
/* Style the buttons */

.portfolio-buttons {
  border: none;
  outline: none;
  padding: 12px 16px;
  /* background-color: white; */
  cursor: pointer;
}

.portfolio-buttons-normal {
  background-color: white;
}

.portfolio-buttons:hover {
  background-color: #ddd;
}

.portfolio-buttons-active {
  background-color: #666;
  color: white;
}
<div id="myBtnContainer">
  <button class="portfolio-buttons portfolio-buttons-normal portfolio-buttons-active" value="reset">Show all</button>
  <button class="portfolio-buttons portfolio-buttons-normal">.html</button>
  <button class="portfolio-buttons portfolio-buttons-normal">.css</button>
  <button class="portfolio-buttons portfolio-buttons-normal">.js</button>
  <button class="portfolio-buttons portfolio-buttons-normal">.java</button>
  <button class="portfolio-buttons portfolio-buttons-normal">.py</button>
</div>

推荐阅读