2

我想根据变量的值在 adiv-box上着色 ared以进行缩放。变量来自- 。greenbox.benefitbox.benefit0255

问题是green我试图通过减法得到逆的部分。没有减法，它正在工作。

<div class= "draggable" id={{box.id}} 
  style="background-color:rgb({{ box.benefit }}, (255 - {{ box.benefit }}), 0); 
     width:{{box.cost}}px"></div>

我怎样才能做到这一点？

4

3 回答 3

2

考虑到我在您的帖子中不清楚何时或如何触发颜色变化以及如何获得box.benefit值的事实，我制作了这个示例小提琴来解释如何使用 jQuery 轻松完成此操作。现在div单击目标时会模拟触发器。该'red'值现在是硬编码的，但如果您解释它的设置位置，则可以动态获取。

html和初始css如下

<div class="draggable" id="box.id">Target</div>​

.draggable {
    width: 100px;
    height: 100px;
    background-color: rgb(255,0,0);
}​

和 javascript

$('.draggable').click(function(){
    var boxcost = "200px";
    var boxbenefit = 25;
    var green = 255-boxbenefit;
    var rgb = "rgb("+boxbenefit+", "+green+", 0)";
    var cssObj = {
      'background-color' : rgb,
      'width' : boxcost
    }
    $(this).css(cssObj);   
});​
于 2012-11-20T22:46:14.440 回答
1

该style属性不能采用等式。您需要计算变量本身的最终值，然后将其输入到您的rgb.

我不太熟悉 Ember.js，但看起来你可能正在使用它。如果你是，你可以尝试这样的事情：

余烬

box = Ember.Object.create({
  benefit: 0,
  inverseColor: function() {
    return 255 - this.get('benefit');
  // Call this flag to mark the function as a property
  }.property()
});

HTML

<div class= "draggable" id={{box.id}} 
  style="background-color:rgb({{ box.benefit }}, ({{ box.inverseColor }}), 0); 
     width:{{box.cost}}px"></div>
于 2012-11-20T09:17:15.600 回答
0

有一种方法可以使用SCSS（也称为“Sassy CSS”）在 CSS 中进行计算和使用变量。

这是他们网页上的一个示例：

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

还有其他一些特性使它非常好用。此外，它自动嵌入到“Ruby on Rails”中。

于 2012-11-20T09:13:06.747 回答