javascript - Jquery增加对象中CSS属性的值

Question

我正在尝试使用 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？

Answer 1

是的。只需执行 this.leftSide = this.leftSide - 1;

您的代码看起来好像 leftSide 是一个函数。假设您将其更改为只是一项赋值，那么目前的代码没有任何问题。

参见此处:http://jsbin.com/pacikas/2/edit?js,console