要素の背景色を変更する前に、イベントリスナーを2回クリックしてリッスンします。

Question

選択した2つのdivの背景色を入れ替えるイベントリスナーを設定しようとしています。イベントリスナーは、2回のクリックが検出されたときにのみ色を交換する必要があります。

例えば、ユーザーが最初の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の

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>

Answer 2

私が正しく理解していれば、最初のクリックのボックスのインデックスを取得し、それを保存します。 2回目のクリックで、インデックスを取得し、配列内の色を入れ替え、その値をボックス内の配列に表示します。

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

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

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

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

を

（間違いなく整理する必要があります...しかしうまくいけば、それは役に立ちます。）