ボタンをクリックすると機能が実行されます

Question

ユーザーがクリックするための一連の画像があります。

<img class="playertile" id="contestant1" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg1717.png"> 
    <img class="playertile" id="contestant2" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg6717.png"> 
    <img class="playertile" id="contestant3" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg4717.png"> 
    <img class="playertile" id="contestant4" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg7717.png"> 
    <img class="playertile" id="contestant5" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg2717.png"> 
    <img class="playertile" id="contestant6" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg5717.png"> 

は、私は彼らが、その後contestant6その後、contestant1その後、contestant2contestant3の順にクリックされた場合、関数は実行したいです。

機能を実行するために、クリックされたこれらの画像とクリックされた順序を記録する適切な方法は何でしょうか。

Answer 1

各画像にonclickイベントを追加して、クリックした画像のidを配列に格納することをおすすめします。説明しなければならないコード内のコメントを追加しました

var selected = []; 
 
var images = document.querySelectorAll('.playertile'); 
 

 
for (var i=0; i<images.length; i++) { 
 
    images[i].onclick = function() { 
 
    selected.push(this.getAttribute('id')); 
 
    // If array greater than four elements, remove first 
 
    if (selected.length > 4) { 
 
     selected.shift(); 
 
    } 
 
    
 
    // Test desired condition 
 
    if (
 
     selected.length === 4 && 
 
     selected[0] === 'contestant3' && 
 
     selected[1] === 'contestant6' && 
 
     selected[2] === 'contestant1' && 
 
     selected[3] === 'contestant2' 
 
    ) { 
 
     console.log('success!'); 
 
    } 
 
    
 
    } 
 
}

<img class="playertile" id="contestant1" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg1717.png"> 
 
<img class="playertile" id="contestant2" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg6717.png"> 
 
<img class="playertile" id="contestant3" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg4717.png"> 
 
<img class="playertile" id="contestant4" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg7717.png"> 
 
<img class="playertile" id="contestant5" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg2717.png"> 
 
<img class="playertile" id="contestant6" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg5717.png">

Answer 2

。

Essence：実行順序リストを保持する配列を持っています。この実行順序と一致する現在の順序のサブ配列を保持します。サブ配列が実行順序配列に完全に含まれ、それらが同じ長さである場合、関数を安全に実行できることを意味します。

注文が異なる場合や、ご注文の要素が増えた場合は、executeOrderの配列を変更する必要があります。

// the order you want 
 
let executeOrder = ["contestant3", "contestant6", "contestant1", "contestant2"]; 
 
// the current active order of clicks 
 
let currentOrder = []; 
 

 
$(".playertile").on('click', function() { 
 
    let elementId = $(this).attr('id'); 
 
    currentOrder.push(elementId); 
 
    
 
    // keep track if the current sub list in currentOrder is still matching up with executeOrder 
 
    let orderMatches = true; 
 
    for (let i = 0; i < executeOrder.length; i++) { 
 
    // if it does not match up, reset current order 
 
    if (currentOrder[i] != undefined && executeOrder[i] != currentOrder[i]) { 
 
     orderMatches = false; 
 
     
 
     // empty current order array to start matching from sracth 
 
     currentOrder = []; 
 
     // if the current pressed element, is also the start of the order you want, put it back in first place, this is for example when pressing 3, 3, 6, 1, 2 
 
     if (elementId == executeOrder[0]) { 
 
     currentOrder.push(elementId); 
 
     } 
 
     break; 
 
    } 
 
    } 
 
    
 
    // if whole subarray (currentOrder) matched executeOrder, and they are the same length, run your function 
 
    if (orderMatches && executeOrder.length === currentOrder.length) { 
 
     currentOrder = []; 
 
     pressedInCorrectOrder(); 
 
    } 
 
}); 
 

 
function pressedInCorrectOrder() { 
 
    console.log("Images pressed in my wanted order"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img class="playertile" id="contestant1" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg1717.png"> 
 
    <img class="playertile" id="contestant2" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg6717.png"> 
 
    <img class="playertile" id="contestant3" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg4717.png"> 
 
    <img class="playertile" id="contestant4" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg7717.png"> 
 
    <img class="playertile" id="contestant5" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg2717.png"> 
 
    <img class="playertile" id="contestant6" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg5717.png">

Answer 3

あなたが注文に対して検討したいどのように多くのクリックに応じて、リストが必要になります。

let order = []; 
let orderElements = 4; //could be the length of the elements or w.e. 

次に、長さに達するまで要素を追加し続け、長さより大きい場合は値をシフトする機能が必要です。

function addElement(el){ 
    if(order.length === orderElements) order.shift(); 
    order.push(el); 
} 

次に、順序配列に追加し続けるハンドラを持つことができます。

$(document).on('click', '.playertile', function(){ 
    addElement($(this).attr('id')); 
}); 

次に、あなたは、単に特定の順序を比較することができます

let specificOrder = ['contestant1', 'contestant2', 'contestant3', 'contestant4']; 

を比較する：

function compare(order, specificOrder){ 
    for(let i = 0; i < specificOrder.length; i++){ 
     if(order[i] !== specificOrder[i]) return false; 
    } 
    return true; 
} 

をすべて一緒：

let order = []; 
 
let specificOrder = ['contestant1', 'contestant2', 'contestant3', 'contestant4']; 
 
let orderElements = 4; //could be the length of the elements e.g specificOrder.length; 
 

 
function addElement(el) { 
 
    if (order.length === orderElements) order.shift(); 
 
    order.push(el); 
 
} 
 

 
$(document).on('click', '.playertile', function() { 
 
    addElement($(this).attr('id')); 
 
    if(compare(order, specificOrder)) alert('You got it!'); 
 
}); 
 

 
function compare(order, specificOrder) { 
 
    for (var i = 0; i < specificOrder.length; i++) { 
 
    if (order[i] !== specificOrder[i]) return false; 
 
    } 
 
    return true; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img class="playertile" id="contestant1" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg1717.png"> 
 
<img class="playertile" id="contestant2" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg6717.png"> 
 
<img class="playertile" id="contestant3" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg4717.png"> 
 
<img class="playertile" id="contestant4" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg7717.png"> 
 
<img class="playertile" id="contestant5" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg2717.png"> 
 
<img class="playertile" id="contestant6" src="http://www.zwooper.com/media/cache/avatar_size/media/products/background/bg5717.png">