클릭시 검은 색 버튼의 색상을 노란색 버튼으로 변경하는 Shift 키 + 마우스 클릭 이벤트를 만드는 방법은 무엇입니까? 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>