Question

我正在尝试在我的Web应用程序中使用重要按钮切换元素。

当元素淡入时，按钮中的文本会发生变化，隐藏后会再次发生变化。

<div class="ISBody">
<h5>Header</h5>
<div class="ISTopLink"><a href="#ISTop">Return to Top</div>
<div class="ISHide"><a href="#" class="hideLink">Hide Products - </a></div>
<hr>
<div id="pos" style="display: block;">
  <div class="ISProductBody">
   <div class="ISSubHead"><A HREF="#">Prodcut Name</A></div>
  <div class="ISList">
   <ul>
    <li>Text here</li>
    <li>Text here</li>
    <li>Text here</li>
    <li>Text here</li>
  </ul>
  </div>
</div>
</div>

$(".hideLink").on("click", function(){
if($(this).text()=="Hide Products - ")
{
    $(this).text("Show Products - ");
} else {
    $(this).text("Hide Products - ");
}
$(".ISProductBody").toggle(); 

return false;
});

如何将更改后的状态保存到本地存储，以便在刷新页面时，它不会进入第一个状态！就像显示/隐藏的元素和按钮或链接中更改的文本一样。

我很感谢每一个提示或解决方案！干杯！

Answer 1

只需使用localStorage将当前状态存储在.setItem()中，然后在页面加载时获取当前状态并采取相应措施。

$(".hideLink").on("click", function() {
  if ($(this).text() == "Hide Products - ") {
    $(this).text("Show Products - ");
    localStorage.setItem("hidden", true);
  } else {
    $(this).text("Hide Products - ");
    localStorage.setItem("hidden", false);
  }
  $(".ISProductBody").toggle();

  return false;
});

$(document).ready(function() {
  var hidden = localStorage.getItem("hidden");

  if (hidden) {
    $(".hideLink").text("Show Products - ");
    $(".ISProductBody").toggle();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ISBody">
  <h5>Header</h5>
  <div class="ISTopLink"><a href="#ISTop">Return to Top</a></div>
  <div class="ISHide"><a href="#" class="hideLink">Hide Products - </a></div>
  <hr>
  <div id="pos" style="display: block;">
    <div class="ISProductBody">
      <div class="ISSubHead">
        <A HREF="#">Prodcut Name</A>
      </div>
      <div class="ISList">
        <ul>
          <li>Text here</li>
          <li>Text here</li>
          <li>Text here</li>
          <li>Text here</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 2

我找到了问题的答案并且工作得很好!!

此处The solution！

非常感谢你的帮助！

在Javascript中保存切换元素和本地存储

2 个答案: