Question

在我的MVC应用程序中，我有一个视图，其中每10秒刷新一次页面。我在视图中有一些段落被隐藏，并且有一个按钮使这些段落没有被隐藏。当我单击按钮以使段落显示时，页面在10秒内自动重新加载时，该问题将隐藏该段落。

这是按钮：

 <button id="button">Display Internal Sequences</button>

这是段落：

<p1 hidden style="text-align:center;font-size: 50px; padding:-25px; margin:-25px;">@Html.Label(@Model.CSLine.ModuleOrderInternalSequence > long.MinValue ? @Model.CSLine.ModuleOrderInternalSequence.ToString() : string.Empty)</p1>

这是使p不隐藏的脚本：

   <script>
         $(document).ready(function () {
         $("#button").click(function () {

             $("p1").attr("hidden", false);
              var show ='true';            
              localStorage.setItem(key, show);   

              });
          });
      </script>

这是每10秒重新加载一次：

setTimeout(function () {
    window.location.reload(1);
        }, 10000);
$(document).ready(function() {
    var show = localStorage.getItem(key);
    if (show == 'true') 
    {
        $("p1").attr("hidden", false);
    }           })

结果是该段在每次重新加载后返回隐藏状态。我想当我单击按钮时，即使重新加载后段落也不会隐藏。

谢谢

Answer 1

if (show = 'true')

这不是比较，您正在将“ show”的值设置为“ true”。使用==比较值。

Answer 2

尝试https://jsfiddle.net/hbmk7e2L/

注意：在这种情况下，您的页面只会在 10秒后重新加载，并且只会刷新一次。

如果您希望页面每10秒刷新一次，则应使用setInterval而不是setTimeout。

<script>
  $(document).ready(function() {
    // If you want the page to refresh constantly, you should use setInterval intead of setTimeout. setTimeout fires only once.
    setTimeout(function () {
        window.location.reload(1);
    }, 10000);

    $("#button").click(function() {
        $("p1").attr("hidden", false);
        localStorage.setItem("show_p1", true);
    });

    if (localStorage.getItem("show_p1") == 'true') {
        $("p1").attr("hidden", false);  
    }
  });
</script>


<p1 hidden style="text-align:center;font-size: 50px; padding:-25px; margin:-25px;">@Html.Label(@Model.CSLine.ModuleOrderInternalSequence > long.MinValue ? @Model.CSLine.ModuleOrderInternalSequence.ToString() : string.Empty)</p1>

<button id="button">Display Internal Sequences</button>

Answer 3

尝试像这样使用jQuery的prop()方法而不是attr()：

$("p1").prop("hidden", false);

prop()的jQuery文档描述了这两种方法之间的区别，特别是对于hidden这样的布尔属性。另外，这是与此.prop() vs.attr()

刷新页面后如何保持视图更改？

3 个答案: