Question

我有几个按钮，包括具有相同名称的div。不幸的是我无法更改名称，它们是由cms生成的。

因此，例如当我只点击第一个按钮时，只隐藏或显示第一个div，这很好。

但刷新页面打开或关闭所有div取决于第一个div关闭或打开，我不想要它。

这是代码：

<button class="a">Button</button>
<div class="target"></div>
<button class="a">Button</button>
<div class="target"></div>

$('.a').click(function() {
  $(this).next(".target").slideToggle(function() {
    localStorage.setItem('visible', $(this).is(":visible"));
  });
});

$('.target').toggle(localStorage.getItem('visible') === 'true');

在这里你可以看到jsfiddle例子：https://jsfiddle.net/pj3gs0z9/3/

所以我的问题是，是否可以仅存储点击的按钮信息，并且在页面刷新后显示或仅从单击的按钮隐藏div？

谢谢

Answer 1

这是可能的，但可能不适用于您的情况。如果您告诉我们您无法更改按钮属性，并且它们完全相同，那么您将无法在localStorage中存储不同的数据。

是否有任何方法可以为按钮添加一些额外信息？它可以是类，id，名称，甚至是data-XXX属性。

顺便问一下，你的按钮是如何生成的？它们是硬编码的，还是从数据库中提取的，还是......？

编辑

这是一种为所有按钮添加不同类的方法（althoguh我建议添加数据属性，但无论你的船是什么漂浮）：

let buttons = document.getElementsByTagName('button'); // Array of your buttons
let index = 0;
for (let button of buttons) {
  button.className += 'myCustomClass-' + ++index; // Add a custom class to your buttons
}

// Now in your local storage, you can store the class of the button !

编辑2 我会像这样存储它：

// On click, in VanillaJS (sorry, haven't used JQuery in a while)
button.onclick = () => {
  let visibleButtons = localStorage.getItem('visible-buttons') || [];
  visibleButtons.push(button.className.match(/(myCustomClass-[0-9]*)/)[0]);
}

Answer 2

这是一个快速的解决方案，但是由于slideToggle你会看到一小段可见的div，除非你先隐藏它们然后再根据localStorage显示它们。

$('.a').click(function() {
  $(this).next(".target").slideToggle(function() {
    localStorage.setItem('visible-' + $(this).index(), $(this).is(":visible"));
  });
});

$.each($('.target'), function(k, trg) {
  $(trg).toggle(localStorage.getItem('visible-' + $(trg).index()) === 'true'); 
});

如何在localStorage中仅为单击的按钮存储JS slideToggle

2 个答案: