检测每个用户都点击了所有按钮

Question

我正在创建一个“完成解锁任务”系统，但我是编码新手，无法使其工作。从字面上看，我花了几周的时间试图寻找方法来做到这一点，但在知道之前什么都没有。我只有最基本的。

我会把所有我需要的东西分开，我真的很感谢你们的帮助。

哦，我正在为此使用 Wordpress 和 Visual Composer。

---

嗯，我已经（或几乎）有一个代码，但不能正常工作。

我需要的是某个按钮（.Test）仅在完成一些任务后出现。

最初，任务将是“访问此链接以解锁”。所以我会给出一些按钮，每个按钮都会打开一个不同的链接。单击时，按钮将触发操作，解锁按钮以获取 cd-keys/links。但问题是我需要用户点击它的所有按钮。在我使用的代码中，当用户单击一个任务按钮时，会出现 .Test。

这是我正在使用的代码：

jQuery 代码

<script>
jQuery(document).ready(function(){
 jQuery('.Like').click(function() {     //Will open a Facebook page
    jQuery('.Test').show();             //Show the button for the link generation
});
 jQuery('.Follow').click(function() {   //Will open a Twitter page
    jQuery('.Test').show();             //Show the button for the link generation
});
});
</script>

CSS 代码

.Test {
    display: none;
}

.Like,
.Follow {
    cursor: pointer;
}

我尝试使用 && 运算符，但它不起作用。我需要用户单击所有链接按钮以显示按钮生成器。不止一个。

感谢您的帮助。

如果您需要更多信息，请询问我。

Answer 1

一种方法是计算这些特定按钮的点击次数，例如通过将按钮存储在 Set 中并获取 Sets 大小：

jQuery(function(){
  var clicked=new Set;//a new unique set
  jQuery('.social').click(function() {     // some button clicked
       clicked.add(this);      //add this button to set
        if(clicked.size>=3) alert("wohoo, all buttons clicked");//actually: three different buttons with class social clicked
  });
});


<button class="social">Twitter</button>
<button class="social">Facebook</button>
<button class="social">GitHub</button>

http://jsbin.com/fanuloxori/edit?output

请注意，Sets 是相当新的，可以用唯一的数组替换它。

---

您可以为按钮分配唯一的 id，这样您就可以跟踪点击的 id，然后可以将其存储在数据库中或用户设备上：

jQuery(function(){
  var clicked=new Set((localStorage.getItem("clicked")||"").split(","));//a new unique set may restored from storage
  jQuery('.social').click(function() {     // some button clicked
       clicked.add(this.id);      //add this buttons id to set
       localStorage.setItem("clicked",[...clicked].join(","))
        if(clicked.size>=3) alert("wohoo, all buttons clicked");//actually: three different buttons with class social clicked
  });
});


<button class="social" id="twitter">Twitter</button>
<button class="social" id="facebook">Facebook</button>
<button class="social" id="github">GitHub</button>

Answer 2

@Jonasw 谢谢老兄。使用下面没有 id 的代码可以正常工作。现在我必须点击所有按钮（我已经为“社交”设置了所有的类）来显示隐藏的内容。但是我无法将它与您的第二个代码的数据存储一起使用。

<script>
jQuery(document).ready(function(){
   var clicked=new Set;
      jQuery('.social').click(function() {
         clicked.add(this);
            if(clicked.size>=2) jQuery('.Test').show();
   });
});
</script>