Question

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

我如何使用多个链接执行此操作？当我们想要一个链接时，我已经考虑过了，我们可以将变量设置为true。我们怎么能用多个呢？

Answer 1

以下是我如何处理它。

首先，为每个链接分配一个唯一的类。然后创建一个数组，其中包含您希望单击的每个链接的类。然后，您可以通过检查其类是否在相应的数组中来检查是否已单击这些链接：

＆＃13;

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");
  }
});

＆＃13;

<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>

＆＃13;

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

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

希望这有帮助！：）

Answer 2

我知道您可能不需要其他解决方案，但根据您拥有的链接数量，这可能会更容易维护。您可以拥有任意数量的链接，只需确保它们有class="required"。

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

$(function() {
	$( ".required" ).click(function() {
    	$(this).removeClass("required");
        if ($( ".required" ).length == 0) {
        	$( "button" ).prop("disabled", false);
        	$( "button" ).text("Well maybe now you can.");
        }
    });

	$( "button" ).click(function() {
    	// second check to deter the tricksters
    	if ($( ".required" ).length == 0) {
        	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>

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

2 个答案: