如何简化 Javascript 对象以便我可以设置 obj.BG='red' 而不是 obj.css("style": "value")

Question

我创建了一个 div 对象作为另一个 div 对象的拖动手柄。我想添加一些自定义属性并对其进行初始化。我已经这样做了（如你所见，我正在使用一些 jQuery）：

          $(document).ready(function(){
    ...
        // initialise object properties & variables
              var SDStartValDragger = {
                beginDragPos: 0,
                currentPos: 0,
                mouseIsDown: false,
                [bg]:css("background-color": "black")
              }
          // make the drag handle change to red while the mouse is over it
                $(".HDragHandle").mouseover(function() {
                  $(this).css({"background-color": "red"});
                });

          // make the drag handle change to black while the mouse leaves it
                $(".HDragHandle").mouseleave(function() {
                  $(this).css("background-color": "black");
                });

//I'm trying to convert to OO coding style, so I can do the previous with 
//              $(".HDragHandle").mouseover(function() {
//                $(this).bg="red"; 
// or similar.
          }

我不明白如何为 SDStartValDragger 对象初始化 css 对象（？）的 background-color 值？在我的代码主体（post init）中，我还希望能够通过 SDStartValDragger.bg = "red"

为 SDStartValDragger 设置 background-color

html正文部分看起来像这样，是否有帮助？

  <body>
    <div id='SDviz'></div>
    <div id='SDscope'>
      <div id='SDvalueSetter'>
        <div id='SDStartValDragger' class='HDragHandle'></div>
        <div id='SDEndValDragger' class='HDragHandle'></div>
      </div>
    </div>
    <div id='SDvalueContainer'>
      <div id='SDStartVal'>29-02-2013<br/>09:30:01</div>
      <div id='SDEndVal'>13-12-2015<br/>14:30:00</div>
    </div>
    <div>
      <div id='startVal'>0</div>
      <div id='endVal'>0</div>     
    </div>
    <div>
      <div id='currentStartVal'>0</div>
      <div id='currentEndVal'>0</div>     
    </div> </body>
</html>

Answer 1

听起来您希望 bg 成为访问者属性。从问题中根本不清楚它应该在哪里或如何设置 background-color，但这里是你如何做访问器部分：

var SDStartValDragger = {
    // ...your other properties...
    set bg(value) {
      // Use value to set background-color
    },
    get bg() {
      // Return the current background-color
    }
};

这要求浏览器中的 JavaScript 引擎至少支持 ES5 (2009)，因此例如不能在 IE8 上运行，IE8 在此之前出现。

这是一个对象示例，它包装 DOM 元素并在 DOM 元素上设置 background-color（通过 jQuery）以响应 bg 属性如上：

var SDStartValDragger = {
  element: $("#target"),
  set bg(value) {
    this.element.css("background-color", value);
  },
  get bg() {
    return this.element.css("background-color");
  }
};
setTimeout(function() {
  SDStartValDragger.bg = "red";
}, 400);
setTimeout(function() {
  SDStartValDragger.bg = "green";
}, 800);

<div id="target">This is the target element</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

如何简化 Javascript 对象以便我可以设置 obj.BG='red' 而不是 obj.css("style": "value")

How do I simplify a Javascript object so I can set obj.BG='red' rather than obj.css("style": "value")

javascript

jquery

attributes

initialization

object