0
私はCSS GridとjQueryを試していますが、ここで取り残されています。私はconsole.logを印刷することができ、私の矢印キーの方向にボックスを拡張しようとしているが、それは、私は値を大きくしたいgrid-column-start値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>を更新しません。 leftSideのDOMパス全体を再度指定することなく、$('boxA').css('grid-column-start', box.leftSide - 1)を行10に指定します。
this.leftsideを参照するだけで可能ですか？
あなたがそれ自身の値を持つように.boxA' 'の各インスタンスは必要ですか？ '$（ '。boxA'）を使う.css（ 'grid-column-start'）'は、コレクション内の最初に一致した要素の値を返すだけです（複数ある場合） – charlietfl
@charlietfl no .boxAは単一の要素です彼自身の値で 。boxA { ディスプレイ：ブロック; グリッド列開始：2; グリッド列終了：3; グリッド行開始：1; グリッド行終了：2; 背景色：赤; } – Marco
@Marco質問にHTML部分を追加できますか？ –