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语句就足够了，然后将数据保存在var s

中

＆＃13;

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)

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果我理解正确，请在第一次点击时抓住该框的索引并存储它。在第二次单击时，抓取索引，交换数组中的颜色，并在框中的数组中显示它们的值。

＆＃13;

var colors = ['#ff0000', '#0000ff', '#00ff00', '#ffff00', '#ffa500', '#ffc0cb', '#9b30ff', '#ffffff', '#7fffd4', '#000000'],
    $colourHolder = $('.colourHolder'),
    lastIdx = false,
    curIdx,
    curColor,
    lastColor;

$colourHolder.on('click',function() {
  if (lastIdx === false) {
    // get first click
    lastIdx = $(this).index();
  } else {
    // get second click
    curIdx = $(this).index();
    
    // assign cur/last colors to a var
    var curColor = colors[curIdx],
        lastColor = colors[lastIdx];
       
    // update array
    colors[lastIdx] = curColor;
    colors[curIdx] = lastColor;
    
    // update boxes on screen
    $colourHolder.eq(curIdx).css('background',lastColor);
    $colourHolder.eq(lastIdx).css('background',curColor);

    // reset click
    lastIdx = false;
  }
})

＆＃13;

.colourHolder {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid #ddd;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.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>

＆＃13;

Answer 3

这应该让你开始。

有很多方法可以解决这个问题。

（附注）您可以根据您的数组创建HTML，而不是循环HTML。

<ul class='color-list'>
  <!-- populate this -->
</ul>

...

var $colorList = $('.color-list');

var colorArray = ['red', 'blue', 'yellow', 'green', 'orange', 'lightblue'];

for ( var i = 0; i < colorArray.length; i++) {
  $colorList.append("<li class='color' style='background: " + colorArray[i] + "'>" + colorArray[i] + "</li>");
}

单击这些内容时 - 您希望将该信息存储在对象或数组中 - 或对象数组中。

var $color = $colorList.find('.color');

var currentChoices = [];

$color.on('click', function() {
  var $thisBlock = $(this);
  var thisColor = $thisBlock.css('background-color');

  // you'll also have to check and ensure the use isn't clicking the same box over and over again...

  if ( currentChoices.length < 2 ) {
    currentChoices.push(
      {
        block: $thisBlock, 
        color: thisColor,
      }
    );
  } else { // if there is already 2... empty the array maybe?
    currentChoices = [];
    currentChoices.push(
      {
        block: $thisBlock, 
        color: thisColor,
      }
    );
  }
  console.log(currentChoices);
});

收集信息......然后使用.css()获取该信息并指定样式。

你可能想要每个方格等的ID ......但这是考虑获取数据的一种方法。您还可以使用数据属性来存储元素的信息。

https://jsfiddle.net/sheriffderek/Lcnu8d4o

这是一个稍微更加流畅的版本，带有数据属性以跟踪盒子编号（我想你必须根据拼图的答案来检查这个）：https://jsfiddle.net/sheriffderek/exf6tLhu

（绝对应该修剪......但希望它有用。）

在更改Elements的背景颜色之前，将Event Listener设置为侦听两次单击

3 个答案: