JavaScript使用户在执行下一个操作之前单击

Question

我们目前有一个按钮，它将操作发送给API。这是一个赠品应用程序。我想实现的是：我们在数据库中有多个赞助商。 （多个链接）。该按钮应该只可用，如果每个链接被点击。

我怎么能用多个链接做到这一点？当我们想要一个链接时，我已经想过了，我们可以将一个变量设置为true。我们如何能够做到这一点与多个？

Answer 1

下面是我如何处理它。

首先，为每个链接分配一个唯一的类。然后创建一个数组，其中包含您希望点击的每个链接的类。然后，你可以检查是否每这些链接已经被点击通过检查他们班是各自的数组中：

var required_links = ["one", "two", "three"]; 
 
var count = 0; 
 

 
$(document).on("click", ".link", function() { 
 
    if ($.inArray(this.classList[1], required_links) != -1 && !$(this).hasClass("clicked")) { 
 
    console.log("User clicked link '" + this.classList[1] + "' for the first time."); 
 
    count++; 
 
    $(this).addClass("clicked"); 
 
    } 
 
    if (count == required_links.length) { 
 
    console.log("All links clicked"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link one">Link 1</div> 
 
<div class="link two">Link 2</div> 
 
<div class="link three">Link 3</div>

在上面的代码中，我检查的存在clicked类。点击后，该元素添加了类，因此无法再次单击。这确保您必须单击每个链接，而不是简单地多次单击相同的元素。

请注意，我在上面的示例中使用了<div>标记，但是相同的理论只需将相关类别附加到<a>标记即可。

希望这会有所帮助！ :)

Answer 2

我知道你可能不需要另一种解决方案，但根据你有多少链接，这可能会更容易维护。你可以有任意数量的链接，只要确保他们有class="required"即可。

当您单击每个链接时，该类将被删除。一旦与class="required"没有更多的链接，按钮/链接就变得可点击。

$(function() { 
 
\t $(".required").click(function() { 
 
    \t $(this).removeClass("required"); 
 
     if ($(".required").length == 0) { 
 
     \t $("button").prop("disabled", false); 
 
     \t $("button").text("Well maybe now you can."); 
 
     } 
 
    }); 
 

 
\t $("button").click(function() { 
 
    \t // second check to deter the tricksters 
 
    \t if ($(".required").length == 0) { 
 
     \t window.location.href = "http://www.gosomewherecool.com/" 
 
     } 
 
    }); 
 
})

.required { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="https://google.com" target="_blank" class="required"> You gotta click me! </a> <br> 
 
<a href="https://google.com" target="_blank" class="required"> Oh and me! </a> <br> 
 
<a href="https://google.com" target="_blank" class="required"> Me too! </a> <br> 
 

 
<button disabled> 
 
Can't click me yet! 
 
</button>