使用按钮切换URL参数 [英] Toggle URL parameter with button

问题描述

我的网站上有一个按钮，用jQuery来切换元素的可见性。

如何将此元素的状态存储在Cookie或本地存储中？所以当用户下次访问该网站时会记住它。我不想使用jQuery插件。

另外，我想添加一个参数到按钮点击的URL，如？title = 0 其中数字代表元素的当前状态，状态也可以用这种方式控制。

这里是一个例子：

（$ hide）。click（function（）{$（'h1'）。toggleClass（'hidden '）; $（this）.text（）=='Hide title'？$（this）.text（'Show title'）：$（this）.text（'Hide title'）;}）; .hidden {visibility：hidden;}

< script src =https://ajax.googleapis.com/ajax/libs /jquery/1.11.3/jquery.min.js\"></script><button id =hide>隐藏title< / button>< h1> Title< / h1>

>解决方案

请注意，未经测试的stacksnippets不允许使用 localStorage

<尝试使用 $。holdReady（）， localStorage

  $ holdReady（真）。 
 //隐藏标题
 if（location.search ===？title = 0）{
 if（！localStorage.getItem（title））{
 localStorage .setItem（ 标题， 0）; 
} else {
 localStorage.setItem（title，0）; 
} 
 $（＃hide）。text（Show title）; 
 $（h1）。addClass（hidden）; 
 // location.search =？title = 0; 
} 
 //显示标题
 if（location.search ===？title = 1）{
 if（！localStorage.getItem（title））{ 
 localStorage.setItem（title，1）; 
} else {
 localStorage.setItem（title，1）; 
} 
 $（＃hide）。text（Hide title）; 
 $（h1）。removeClass（hidden）; 
 // location.search =？title = 1
} 
 $ .holdReady（false）; 
 $（document）.ready（function（）{
 $（'＃hide'）。click（function（）{
 $（'h1'）。toggleClass（'hidden'） ; 
 $（this）.text（）=='Hide title'？
 $（this）.text（'Show title'）&&& localStorage.setItem（title，0 ）：
 $（this）.text（'Hide title'）&& localStorage.setItem（title，1）; 
}）; 
 location.search =？title =+ localStorage.getItem（title）; 
}）; 
  

另见

I have a button on my website that toggles the visibility of an element with jQuery.

How can I store the state of this element in a cookie or local storage? So it is remembered when the user visits the site the next time. I wouldn't like to use jQuery plugins.

Also I would like to add a parameter to the url on button click like ?title=0 where the number would represent the current state of the element, and the state would be also controllable this way.

Here is an example:

$('#hide').click(function(){
  $('h1').toggleClass('hidden');
  $(this).text() == 'Hide title' ?
    $(this).text('Show title') :
    $(this).text('Hide title');
});

.hidden {
    visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<button id="hide">Hide title</button>
<h1>Title</h1>

解决方案

Note, untested at stacksnippets , which does not allow use of localStorage

Try utilizing $.holdReady() , localStorage

$.holdReady(true);   
// hide title
if (location.search === "?title=0") {
  if (!localStorage.getItem("title"))   {
    localStorage.setItem("title","0");  
  } else {
    localStorage.setItem("title","0");  
  }
  $("#hide").text("Show title");
  $("h1").addClass("hidden");
  // location.search = "?title=0";
}
// show title
if (location.search === "?title=1") {
  if (!localStorage.getItem("title"))   {
    localStorage.setItem("title","1");  
  } else {
    localStorage.setItem("title","1");  
  }
  $("#hide").text("Hide title");
  $("h1").removeClass("hidden");
  // location.search = "?title=1"
}    
$.holdReady(false);
$(document).ready(function() {
    $('#hide').click(function() {
      $('h1').toggleClass('hidden');
      $(this).text() == 'Hide title' ?
        $(this).text('Show title') && localStorage.setItem("title", "0") :
        $(this).text('Hide title') && localStorage.setItem("title", "1");
    });
    location.search = "?title=" + localStorage.getItem("title");
});

See also Global Variable usage on page reload

这篇关于使用按钮切换URL参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！