JavaScript 字符串拼接似乎不起作用

Question

我正在尝试保存 Bootstrap Collapses 的展开/折叠状态。

我将其保存在 LocalStorage 中并从中读取。

$(".content-accordion-content").each(function (index) {
                console.log(index, $(this).attr("id"));
                $(this).on("show.bs.collapse", function () {
                    var expandedCollapses = localStorage.getItem("ExpandedCollapses");
                    if (expandedCollapses !== undefined && expandedCollapses !== null && expandedCollapses !== "") {
                        expandedCollapses = expandedCollapses + "|" + $(this).attr("id");
                    }
                    else {
                        expandedCollapses = $(this).attr("id");
                    }
                    localStorage.setItem("ExpandedCollapses", expandedCollapses);
                })
                $(this).on("hide.bs.collapse", function () {
                    var expandedCollapses = localStorage.getItem("ExpandedCollapses");
                    if (expandedCollapses !== undefined && expandedCollapses !== null) {
                        if (!expandedCollapses.includes("|") && expandedCollapses.includes($(this).attr("id")))
                            expandedCollapses = "";
                        else {
                            var ecArr = expandedCollapses.split("|");
                            expandedCollapses = ecArr.splice(ecArr.indexOf($(this).attr("id")), 1).join("|");
                        }
                        localStorage.setItem("ExpandedCollapses", expandedCollapses);
                        console.log(expandedCollapses,$(this).attr("id"));
                    }
                })
            });

它似乎有效，但有时它会从数组中删除多个条目。

例如，我打开作者，然后打开书籍，然后打开视频。字符串看起来像这样“作者|书籍|视频”。如果我现在关闭图书，则只有“作者”。有人可以帮我解开我的大脑吗？

Answer 1

您可以使用

filter

代替

splice

。

使过程变得更简单，因为我们实际上并不需要知道我们想要删除的值的索引。

let currentValue = "";
function toggleValue(_value) {
   let splitValue = currentValue.split("|").filter(_=>_);
   // split by '|'
   // as well as filter out falsy string values i.e. ""
   if (splitValue.includes(_value)) {
    // check if the array includes the value
    // we can use includes because we arent checking for complex types
    splitValue = splitValue.filter(v => v !== _value);
    // filter out the value that already exists in the array
   } else {
    splitValue.push(_value);
    // we know the value doesn't exist so we can safely push it to the array
   }
   const newValue = splitValue.join("|");
   // join the array with '|'
   updateValue(newValue);
}

//#region Ignore This
function updateValue(_value) {
  currentValue = _value;
  document.getElementById("output").innerHTML = currentValue;
}
//#endregion

<button onclick="toggleValue('author')">Toggle Author</button>
<button onclick="toggleValue('books')">Toggle Books</button>
<button onclick="toggleValue('videos')">Toggle Videos</button>
<div id="output"></div>

Answer 2

哎呀，找到了。我加入了 .splice() 方法的结果。 事实证明这是错误的。 这在这里修复了我的代码

var ecArr = expandedCollapses.split("|");
ecArr.splice(ecArr.indexOf($(this).attr("id")), 1);
expandedCollapses = ecArr.join("|");