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.
          }

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

为SDStartValDragger设置SDStartValDragger.bg = "red"

如果有帮助的话，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属性：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

如何简化Javascript对象，以便设置obj.BG =＆＃39; red＆＃39;而不是obj.css（＆＃34; style＆＃34;：＆＃34; value＆＃34;）

1 个答案: