javascript - 设置事件监听器以在更改元素的背景颜色之前监听两次单击

Question

我正在尝试设置一个事件监听器，它将交换所选的任何 2 个 div 的背景颜色。事件监听器应仅在检测到 2 次点击后才交换颜色。

例如，如果我在页面上有 10 个 div，每个都有不同的颜色，当用户点击第一个 div 时，应该不会发生任何事情，但是一旦他们点击另一个 div，事件监听器应该交换背景周围的颜色。

我不确定它是否可以完成，因为所有 div 都具有相同的类，并且它们的起始背景颜色来自 jquery 中的数组。

<div class="Sample">
  <div class="colourHolder"></div>
  <div class="colourHolder"></div>
  <div class="colourHolder"></div>
  <div class="colourHolder"></div>
  <div class="colourHolder"></div>
  <div class="colourHolder"></div>
  <div class="colourHolder"></div>
  <div class="colourHolder"></div>
  <div class="colourHolder"></div>
  <div class="colourHolder"></div>
</div>

let colors = ['#ff0000', '#0000ff', '#00ff00', '#ffff00', '#ffa500', '#ffc0cb', '#9b30ff', '#ffffff', '#7fffd4', '#000000']

$('.colourHolder').each(function(index, element){
  $(element).css("background-color", colors[index]);
})

Answer 1

用 if if else 语句就足够了，然后将数据保存在 vars

let colors = ['#ff0000', '#0000ff', '#00ff00', '#ffff00', '#ffa500', '#ffc0cb', '#9b30ff', '#ffffff', '#7fffd4', '#000000']

$('.colourHolder').each(function(index, element){
  $(element).css("background-color", colors[index]);
});
var prev,
    prevcolor,
    count = 0;
function changeColor(){
  if(count==0){
    prev = $(this);
    prevcolor = prev.css("background-color")
  }else if(count==1){
    prev.css("background-color", $(this).css("background-color"));
    $(this).css("background-color", prevcolor);
    count = -1;
  }
  count+=1;
};
$('.colourHolder').on("click", changeColor)

.colourHolder{width: 100px;height: 100px;display: inline-block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Sample">
  <div class="colourHolder"></div><div class="colourHolder"></div><div class="colourHolder"></div><div class="colourHolder"></div><div class="colourHolder"></div><div class="colourHolder"></div><div class="colourHolder"></div><div class="colourHolder"></div><div class="colourHolder"></div><div class="colourHolder"></div>
</div>