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

如果按contestant3然后contestant6然后contestant1然后contestant2的顺序点击它们，我想要执行一个函数。

为了执行某项功能，记录点击这些图片的顺序以及点击它们的顺序的适当方法是什么。

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

所有在一起：

＆＃13;

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

＆＃13;

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

＆＃13;

如果在订单中单击按钮，则执行功能

3 个答案: