JavaScript macht Benutzer vor dem Ausführen der nächsten Aktion klicken

Question

Wir haben derzeit eine Schaltfläche, die eine Aktion an eine API sendet. Dies ist eine Werbegeschenk-App. Was ich erreichen möchte: Wir haben mehrere Sponsoren in der Datenbank. (Mehrere Links). Die Schaltfläche sollte nur verfügbar sein, wenn auf jeden Link geklickt wird.

Wie kann ich dies mit mehreren Links tun? Ich habe darüber nachgedacht, als wir wie eine Verbindung hatten, konnten wir eine Variable auf wahr setzen. Wie können wir das mit mehreren machen?

Answer 1

So würde ich damit umgehen.

Weisen Sie zuerst jedem Link eine eindeutige Klasse zu. Erstellen Sie dann ein Array, das die Klassen für jeden Link enthält, auf den Sie klicken möchten. Dann können Sie überprüfen, ob jede dieser Verbindungen durch Überprüfung geklickt haben, wenn ihre Klasse im jeweiligen Array ist:

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>

In dem obigen Code-Schnipsel, ich Überprüfung auf das Vorhandensein der clicked Klasse. Nach dem Klicken auf das Element wird die Klasse hinzugefügt, sodass nicht erneut darauf geklickt werden kann. Dies stellt sicher, dass Sie auf jede Verbindung klicken müssen, anstatt einfach auf dasselbe Element mehrere Male klicken zu können.

Beachten Sie, dass ich <div> Tags im obigen Beispiel verwende, aber die gleiche Theorie funktioniert, indem Sie einfach die relevanten Klassen an das <a> Tag anhängen.

Hoffe, das hilft! :)

Answer 2

Ich weiß, dass Sie möglicherweise keine andere Lösung benötigen, aber dies könnte ein wenig einfacher zu pflegen basierend darauf, wie viele Links Sie haben. Sie können so viele Links haben, wie Sie wollen, stellen Sie einfach sicher, dass sie eine class="required" haben.

Wenn Sie auf jeden Link klicken, wird diese Klasse entfernt. Sobald keine Verbindungen mehr mit class="required" bestehen, wird der Button/Link klickbar.

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