0
CSS Grid와 jQuery를 실험 중이며 여기에 붙어 있습니다. 나는, 나는 console.log을 인쇄 할 수 있습니다 내 화살표 키의 방향으로 상자를 확장하기 위해 노력하고있어하지만Jquery 객체의 CSS 속성 값을 늘리는 것
$(document).ready(function() {
console.log("ready!");
$(document).keypress(function(event) {
console.log(("Key: " + event.which));
});
const box = {
leftSide: $('.boxA').css('grid-column-start'),
rightSide: $('.boxA').css('grid-column-end'),
topSide: $('.boxA').css('grid-row-start'),
bottomSide: $('.boxA').css('grid-row-start'),
moveLeft: function() {
if (this.leftSide > 1) {
console.log(this.leftSide);
$('.boxA').css('grid-row-start', function() {
return box.leftSide - 1;
});
}
}
}
$(document).keydown(function(e) {
switch (e.which) {
case 37:
box.moveLeft();
break;
case 38: // up
break;
case 39: // right
break;
case 40: // down
break;
default:
return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll/move caret)
});
});.mediumboxes {
width: 100vw;
height: 100vh;
background-color: blue;
display: grid;
grid-template-columns: repeat(20, 5%);
grid-template-rows: repeat(10, 10%);
}
.boxA {
display: block;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
background-color: red;
}
.boxB {
display: block;
grid-column: 2/3;
grid-row: 1/11;
background-color: orange;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>내가 값을 증가하고자 그것은 grid-column-start 값을 업데이트하지 않습니다 leftSide의 전체 DOM 경로를 다시 지정하지 않아도됩니다.
this.leftside과 관련하여 만 가능합니까?
는 자신의 값입니다 가지고 당신이'.boxA'의 각 인스턴스가 필요하십니까? css ('grid-column-start')'는 콜렉션에서 첫 번째로 일치하는 요소의 값만 반환한다. (둘 이상있는 경우) – charlietfl
@charlietfl no. boxA는 단일 요소이다. 자신의 값으로 . 박스 A { 디스플레이 : 블록; grid-column-start : 2; grid-column-end : 3; 그리드 - 행 - 시작 : 1; 그리드 - 행 끝 : 2; background-color : red; } – Marco
@ Marco 질문에 HTML 부분을 추가 할 수 있습니까? –