正在尝试使用jQuery构建一个内容锁定器

Trying to build a content locker using jQuery

本文关键字：一个 锁定 构建 jQuery      更新时间：2023-09-26

我对jQuery很陌生，不完全确定自己在做什么。我会尽力解释我面临的问题。

我试图锁定登录页上的一些内容，直到用户使用FB、Twitter、LinkedIN或G+共享链接。我写的剧本的第一个版本（运行良好）是这样的：

<head>
 <script type="text/javascript">
 ...
 $(document).ready(function()
  {
   $('.class').click(clearroadblock());
   buildroadblock();
  }
 </script>
 <style>
 .class
  {
   [css stuff]
  }
 </style>
</head>
<body>
 <div id="something">
  <ul>
   <li> <a href="link1" target="blank" class="class">Link1</a> </li>
   <li> <a href="link2" target="blank" class="class">Link2</a> </li>
  </ul>
 </div>
</body>

我现在面临的问题是更改此代码，将列表元素替换为社交共享按钮。因为它们不再在.class下，而是像fb-share-button和twitter-share-button这样的类。请帮助我理解我需要修改什么来适应这种情况？附言：这不是Wordpress网站。

function clearroadblock()
{
    $('#roadblockdiv').css('display', 'none');
    $('#roadblockBkg').css('display','none');
}

这是我在检测到点击后清除覆盖的方式，BTW.

我可以将社交按钮包装在div中，为它们分配ID并使用这些ID触发点击吗？

<div id="Button">
 <a href="link" class"twitter-share-button">Tweet</a>
</div>
$('#Button').click(clearroadblock());

您可以在一个元素上使用空格分隔多个类。尝试以下操作：

class="class fb-share-button"

您的jquery仍然可以在"class"类之外工作。不过，我建议你把这个名字改成更有意义的名字。css可以针对一般样式的"类"，但也可以分别针对fb和twitter。

更新

我决定为此创建一个快速的JSFiddle。

有些风格等与你正在做的不一样，但问题已经解决了。我创建了一个id为main的div，其中包含要隐藏的内容。上面有一个绝对定位的div，这是路障。javascript显示了障碍（假设这就是您想要对buildroadblock()执行的操作）。

点击带有id socialMedia的ul中的链接，我们称之为clearroadblock。请注意缺少括号。这掩盖了障碍。

这不是阻止某人查看信息的好方法，您可能需要考虑在执行操作时从服务器上删除内容，但是，我认为这可以回答您的问题。

相关文章：