JavaScriptを使用して次のアクションを実行する前にクリックする

Question

現在、APIにアクションを送信するボタンがあります。これはプレゼントです。達成したいこと：データベースには複数のスポンサーがいます。 （複数のリンク）。各リンクがクリックされている場合にのみ、ボタンを使用する必要があります。

これを複数のリンクでどのように行うことができますか？ 1つのリンクがあったときに変数を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"とのリンクがなくなると、ボタン/リンクがクリック可能になります。ただ、すべてのリンクがクリックされたら `true`に値を設定し

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