javascript - 保持动态展开按钮的状态

Question

如果您点击 <div id = button1/2/3>，我有 Javascript 函数来显示内容。但刷新页面后，一切都被隐藏了。我想记住最后一个操作 - 缓存它。

请帮忙。

        $(document).ready(function() {
          $("#button1, #button2, #button3").hide();

          $("#news1").click(function() {
          $("#button1").show(); 
          $("#button2, #button3").hide();
          });

          $("#news2").click(function() {
          $("#button2").show(); 
          $("#button1, #button3").hide();
          });

          $("#news3").click(function() {
          $("#button3").show(); 
          $("#button1, #button2").hide();
          });
       });

Answer 1

您可以使用 locastorage 来实现这一点。 localstorage 将在 http 调用之间持续存在。所以你将能够轻松地保持状态。我也更新了您的代码以遵循最佳实践。

HTML 如下:

<input id="button1" type="button" class="expand" value="b1">
<input id="button2" type="button" class="expand" value="b2">
<input id="button3" type="button" class="expand" value="b3">


<input class="news" type="button" data-id="1" value="n1">
<input class="news" type="button" data-id="2" value="n2">
<input class="news" type="button" data-id="3" value="n3">

这是 JavaScript。请注意，我在大多数情况下都使用了类:

    (function () {

        function resetLocalStorage() {
            $('.expand').each(function () {
                delete localStorage[$(this).attr('id')];
            });
        }

        $(".expand").each(function () {
            if (localStorage.hasOwnProperty($(this).attr('id'))) $(this).show();
            else if (localStorage.hasOwnProperty('trackingIsOn')) $(this).hide();
        });

        $(".news").click(function () {
            $('.expand').hide();
            var buttonElem = $('#button' + $(this).data('id'));
            buttonElem.show();
            resetLocalStorage();
            localStorage[buttonElem.attr('id')] = true;
            localStorage.trackingIsOn = true;
        });

    })();

您可以找到完整的工作示例 here