javascript - 使用 jQuery 锁定和解锁页面？-6ren

javascript - 使用 jQuery 锁定和解锁页面？

转载作者：行者123 更新时间：2023-11-28 16:15:28

29

4

<body>
    <span id="lock">lock</span>
    <div id="one">test test</div>
    <div id="three" style="display: none">hide</div>
    <span id="two">test</span>
    <div id="div_lock">
        Enter password: <input type="password"> <input type="button" value="unlock" id="unlock">
    </div>
</body>

$('#lock').click(function(){
  $('#div_lock').show();
    //????
})

$('#unlock').click(function(){
  $('#div_lock').hide();
//????
})

如果我单击“锁定”，那么我想打开 div_lock 并隐藏页面中的所有其他元素。如果我单击解锁，则隐藏 div_lock 并显示以前的元素。

我可以使用 .hide 之外的其他功能吗？如果我使用 hide 则可以检查源代码。也许有任何带有简单哈希等的变量？如果不是，我怎样才能用 .hide() 和 show() 做到这一点？我还可以使用 PHP 和 Ajax

查看jsfiddle here .

最佳答案

最简单的解决方案是:

$('#lock').click(function() {
    $(this).siblings().andSelf().fadeOut();
    $('#div_lock').fadeIn();
})

$('#unlock').click(function() {
    $('#div_lock').fadeOut();
    $(this).closest('div').siblings().fadeIn();
})

(但请注意，我使用的是 fadeIn() 和 fadeOut() 而不是“更突然”的 show() 和 hide() )

JS Fiddle demo .

还值得记住的是，如果任何人可以访问您的浏览器(假设这是某种安全功能)，他们仍然可以通过 JavaScript 控制台或通过简单地刷新页面(假设没有登录)来覆盖它。

<小时/>

更新以回应OP留下的评论(如下):

this is ok, but if i click unlock then this show me also <div id="three" style="display: none">hide</div> - this should me still display:none

您遇到的问题是所有受影响的元素都是 style="display: none;"一旦 jQuery 隐藏了它们(毕竟这就是它的工作原理)；因此我建议采用一种更简洁的方法，并将内容和控件划分为类似于以下内容的内容:

<div id="controls">
    <button id="lock">Lock screen</button>
    <input type="password" />
    <button id="unlock">Unlock screen</button>
</div>
<div id="content">
    <!-- all content goes in here -->
</div>

这适用于以下 jQuery(它存储要隐藏/显示的节点，然后根据需要恢复它们):

var content = $('#content'),
    contents;
$('#controls').children().slice(1).hide();
$('#lock').click(function() {
    contents = content.html();
    content.empty();
    $(this).hide().siblings().show();
});

$('#unlock').click(function() {
    content.html(contents);
    $(this).closest('div').children().hide().first().show();
});

JS Fiddle demo .

关于javascript - 使用 jQuery 锁定和解锁页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11603296/

29

4

0

文章推荐： javascript - 如何等待多个 jquery 帖子完成？

文章推荐： javascript - 读取未知参数 json javascript

文章推荐： javascript - Like 占位符文本在 Firefox 中无法完美运行

文章推荐： javascript - 为什么return false仍然允许提交表单？

python - 如何在没有副作用的情况下 pickle 和解 pickle ？
为什么 pickle 重用现有的 Python 类“C”而不是从 pickle 字节重建类？有没有一种方法可以在没有副作用的情况下 pickle 和解 pickle ？这是我的回复 session

首页

博学

6Ren·AI

商城

javascript - 使用 jQuery 锁定和解锁页面？