Javascript 一半在本地工作，完全在 codepen 上工作答案

【问题标题】：Javascript half works locally, fully works on code penJavascript 一半在本地工作，完全在 codepen 上工作
【发布时间】：2021-04-10 02:26:33
【问题描述】：

一直在绞尽脑汁想弄清楚这一点。我试过添加 $( document ).ready(function() { 并在脚本周围再次关闭它，但不是快乐。

这是一个简单的过滤器。应该根据按钮显示/隐藏 div 元素。该脚本将“活动”添加到单击的按钮并将其从其他按钮中删除。

它完全按照 Code Pen 的预期工作。但是，当在本地或服务器上运行它时，过滤器工作正常，“活动”被添加到单击的按钮中，但“活动”不会从最后一个按钮中删除并保持堆叠（即，如果我单击 snowdonia 4 次， class 'active' 被应用了 4 次。如果我然后点击 tryfan，active 会正确应用，但不会从上一个按钮中删除）

我正在使用的代码如下。任何帮助将非常感激。 Javascript 与我的 filter.js 文件中出现的完全相同

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}
        var header = document.getElementById("myBtnContainer");
var btns = header.getElementsByClassName("btn-filter");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  if (current.length > 0) { 
    current[0].className = current[0].className.replace(" active", "");
  }
  this.className += " active";
  });
}

.filterDiv {
    display: none;

    /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

.btn-filter {
    background-color: #fff;
    border-radius: 0;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-transform: uppercase;
    font-family: 'Montserrat';
    font-size: 14px;
    font-weight: 600;
    color: #91227e;
    border: 2px;
    border-style: solid;
    border-color: #91227e;
}

.active,
.btn-filter:hover {
    background-color: #91227e;
    color: #fff;
}

                <div id="myBtnContainer">
                    <button class="btn-filter active" onclick="filterSelection('all')"> Show all</button>
                    <button class="btn-filter" onclick="filterSelection('snowdon')"> Snowdon</button>
                    <button class="btn-filter" onclick="filterSelection('tryfan')"> Tryfan</button>
                    <button class="btn-filter" onclick="filterSelection('glyder')"> Glyder</button>
                </div>

这是我在 html 文件中链接的脚本：

这里是codepen中工作版本的链接：https://codepen.io/dan-anderton-the-sasster/pen/vYgWdER

【问题讨论】：

控制台有错误吗？另外，您能否将代码示例减少到minimal reproducible example；就目前而言，它有点混乱，有些重复，不会帮助人们找到解决方案。
不，完全没有错误。
尝试使用window.addEventListener('load', function() {//this initialization});
当我试图自己解决这个问题并试一试时，我遇到了这个问题。不幸的是，它没有用。
这段代码中有很多地方会发生奇怪的事情。不要在if 语句中加上{}，这是自找麻烦。如果没有所有这些占位符数组，你真的可以简化事情。直接用.filter()、.map()、.reduce()等数组方法进行操作。

标签： javascript html

【解决方案1】：

这不是一个答案，而是一个建议。但是对于您的 localhost 环境，您是否还包括在 codepen 示例中使用的必要文件？即：jquery？

我无法从您提供的示例中看出，但指向 codepen 的链接会很有用。

尝试 - 您可能需要稍微调整以适应您的 html，因为我无法查看：

var btns = document.getElementsByClassName("btn-filter");
var i;

for (i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
    this.classList.toggle("activated");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

【讨论】：

道歉尝试发布您要求的信息，但看起来一团糟。添加到主要问题。
嗨，丹。我已经更新了我的答案。我希望这会有所帮助。
感谢您的建议。不幸的是，这也不起作用。不过我确实设法让它工作了。

【解决方案2】：

原来我的代码和引导程序之间的活动标记存在 CSS 冲突。更改要应用于当前按钮的类解决了该问题。因此，在这种情况下，将其从 active 更改为 active-filter，然后进行相应的样式设置。

感谢大家帮我看。

【讨论】：