更新

Question

我对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之类。请帮助我理解我需要修改什么以适应这个？ PS：这不是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());

Answer 1

通过用空格分隔元素，可以在元素上有多个类。请尝试以下方法：

class="class fb-share-button"

你的jquery仍将在“class”类中运行。我建议你把这个名字改成更有意义的东西。您的CSS可以针对一般样式定位“类”，但您也可以单独定位fb和twitter。

更新

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

某些样式等与您正在执行的操作不同，但问题已得到解决。我创建了一个包含id main的div，其中包含您要隐藏的内容。在这个顶部有一个绝对定位的div，这是路障。 javascript正在显示障碍（假设您要使用buildroadblock()进行操作）。

点击带有社交媒体ID的ul中的链接，我们会调用clearroadblock。注意缺少括号。这隐藏了障碍。

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

尝试使用jQuery构建内容锁定器

1 个答案:

更新