黒ボタンの色をクリック時に黄色のボタンに変えるシフトキー+マウスクリックイベントの作成方法は？ JavaScript

Question

私は掃海艇のゲームを作成しています。ユーザーがShiftキーを押しながらマウスを左クリックすると、フィールド用に作成したボタン（背景色は黒）が黄色に変わるイベントを作成しようとしていますフラグが立てられたボタンを示す。ここまで私がこれまで持っていたことがあります。属性（ 'data-value'、0）は、そのボタンに鉱山からの距離を示す鉱山または番号ラベルがないことを意味します。

JS：

$('button').getAttribute('data-value', 0).getAttribute('data-x', j).getAttribute('data-y', i).getAttribute('data-visible', false).getAttribute('data-mine', false).click(function(e) { 
if(e.shiftKey) { 
$('button').addClass('flag'); 
} 
}); 

はCSS：

table td button { 
    background-color: black; 
    color: white; 
    width: 2em; 
    height: 2em; 
} 

.flag { 
    background-color: yellow; 
} 

あなたの助けをいただき、ありがとうございます。

Answer 1

キーの組み合わせを検出できない場合は、次のスクリプトを使用してそれを行うことができます。下記のコードを参照してください。SHIFT+ mouse left clickを押して検出してください。正確にあなたが立ち往生しているどの部分

let ShiftOn = false; 
 
$(document).ready(function() { 
 
    $(document).keydown(function(e) { 
 
    let isShiftOn = e.which == "16"; 
 

 
    (isShiftOn) && (ShiftOn = true); 
 
    }).keyup(function() { 
 
    ShiftOn = false; 
 
    }); 
 
    $("#detectable-area").on('click', function() { 
 
    (ShiftOn) && console.log('SHIFT +LEFT Click'); 
 
    }); 
 
});

div#detectable-area { 
 
    width: 100%; 
 
    height: 250px; 
 
    background: #c8c8c8; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    line-height: 250px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="detectable-area">Press SHIFT + click anywhere in the div to detect.</div>