我正在尝试使用 CSS 网格和 jQuery,但我被困在这里。我正在尝试沿箭头键的方向展开框,我可以打印 console.log
但它不会更新 grid-column-start
值
$(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>
我想增加 leftSide
的值而不再次指定整个 DOM 路径 $('boxA').css('grid-column-start', box.leftSide - 1)
第 10 行。
是否可以只引用this.leftside
?
最佳答案
是的。只需执行 this.leftSide = this.leftSide - 1;
您的代码看起来好像 leftSide
是一个函数。假设您将其更改为只是一项赋值,那么目前的代码没有任何问题。
关于javascript - Jquery增加对象中CSS属性的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47744417/