显示/隐藏基于保存值的框

show/hide boxes based on saved value

本文关键字：保存 隐藏 于保存 显示      更新时间：2023-09-26

我有一个主页，显示了一堆平铺框和一个选项页面的链接，允许我的用户隐藏或显示任何一个这些框，然后保存这些设置。

这是我到目前为止所做的:选项页

    <script>
    $(document).ready(function(){
      $("#musicHide").click(function(){
        $("#mymusic").hide();
      });
      $("#musicShow").click(function(){
        $("#mymusic").show();
      });
    });
    </script>
</head>
<body>
<p>My Music</p>
<input type="radio" id="musicHide" value="0"/>Hide
<input type="radio" id="musicShow" value="1" checked="checked"/>Show
</body>

主页:

<div class="items">
<a id="mymusic" class="box" href="#" style="background: #F8591A;">
<span>Music</span>
<img height="150px" width="150px" class="icon" src="images/my-music.png" alt="" />
</a>

这是我目前有一个问题:当我点击隐藏单选按钮时，"显示"单选按钮不会取消选择。

  • 我该怎么做?

当我使用选项页时，它不会更新主页。

  • 这可能吗?
  • 我必须在主页上的代码，而不是在不同的页面(选项页)
  • 我应该在主页上使用侧菜单吗?

此外，我想通过他们点击保存按钮来存储每个用户的这些值，以便下次他们打开页面时记住他们想要显示和隐藏的内容

为了按照您想要的方式设置您的单选按钮，您需要为每个元素添加相同的Name属性。例句:

<input type="radio" id="musicHide" value="0" name="radioMusic"/>Hide
<input type="radio" id="musicShow" value="1" checked="checked" name="radioMusic"/>Show

为了将"选项"持久化到主页，您需要以某种方式存储首选项。这很可能是某种类型的数据库，但您也可以使用cookie进行临时存储。

相关文章：