0
继previous question之后，我略微改变了我的动态设计，虽然（很明显）在制作上有一些困难。将动态CSS添加到同一类的不同实例
我有一个屏幕，像这样：
+------+ +------+
| T1 | | T2 |
| | | |
+------+ +------+
+------+ +------+
| T3 | | T4 |
| | | |
+------+ +------+
凡“T的不同缸的形状。
<div class="tankWidget">
<div class="banner">Tank 2</div>
<div class="container">
<div class="frame">
<div class="strip">
<div id="tank2FrameA" class="a">83%</div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
<div class="i"></div>
<div class="j"></div>
<div class="k"></div>
<div class="l"></div>
<div class="m"></div>
<div class="n"></div>
<div class="o"></div>
<div class="p"></div>
<div class="q"></div>
<div class="r"></div>
<div class="s"></div>
<div class="t"></div>
<div class="u"></div>
<div class="v"></div>
<div class="w"></div>
<div class="x"></div>
</div>
</div>
</div>
<div class="widget-footer">
<table id="specTab23">
<tr><th>Volume (T)</th><th>Capacity (T)</th><th>Ullage (T)</th></tr>
<tr id="tank2"><td>6260</td><td>7500</td><td>1.24</td></tr>
</table>
<br />
<div class="lowerWidget-footer">
<button>Details</button>
</div>
</div>
</div>
我已经用“分裂”的内容gradient（不像'bottom:50%我在以前的问题中使用）。
希望这将使它更容易产生这样一些事情：
+------------------+ +------------------+
| | | |
| +----------+ | | +----------+ |
| | 50% | | | | 25% | |
| | | | | | | |
| |----------| | | | | |
| | | | | |----------| |
| | | | | | | |
| +----------+ | | +----------+ |
+------------------+ +------------------+
所以，我想添加一些CSS样式到条的parent（jQuery中的第二部分所示），其中应是我想添加的类“地带”。
所以我试图用：
var tank1 = $('#tank1FrameA').text();
tank1 = 100-parseInt(tank1);
alert("tank 1 value is " + tank1);
$('.strip div').css("background", "-moz-linear-gradient(top, #000fff 0%, #000fff " + tank1 + "%, #ffff00 " + tank1 + "% #ffff00 100%)")
$('.strip div').css("background", "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#000fff), color-stop(" + tank1 + "%,#000fff), color-stop(" + tank1 + "%,#ffff00), color-stop(100%,#ffff00))")
$('.strip div').css("background", "-webkit-linear-gradient(top, #000fff 0%,#000fff " + tank1 + "%,#ffff00 " + tank1 + "%,#ffff00 100%)")
$('.strip div').css("background", "-o-linear-gradient(top, #000fff 0%,#000fff " + tank1 + "%,#ffff00 " + tank1 + "%,#ffff00 100%)")
$('.strip div').css("background", "-ms-linear-gradient(top, #000fff 0%,#000fff " + tank1 + "%,#ffff00 " + tank1 + "%,#ffff00 100%)")
$('.strip div').css("background", "linear-gradient(top, #000fff 0%,#000fff " + tank1 + "%,#ffff00 " + tank1 + "%,#ffff00 100%)")
var tank2 = $('#tank2FrameA').text();
tank2 = 100 - parseInt(tank2);
alert("tank 2 value is " + tank2);
$('#tank2FrameA').parent().parent().css("background", "-moz-linear-gradient(top, #000fff 0%, #000fff " + tank2 + "%, #ffff00 " + tank2 + "% #ffff00 100%)")
$('#tank2FrameA').parent().parent().css("background", "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#000fff), color-stop(" + tank2 + "%,#000fff), color-stop(" + tank2 + "%,#ffff00), color-stop(100%,#ffff00))")
$('#tank2FrameA').parent().parent().css("background", "-webkit-linear-gradient(top, #000fff 0%,#000fff " + tank2 + "%,#ffff00 " + tank2 + "%,#ffff00 100%)")
$('#tank2FrameA').parent().parent().css("background", "-o-linear-gradient(top, #000fff 0%,#000fff " + tank2 + "%,#ffff00 " + tank2 + "%,#ffff00 100%)")
$('#tank2FrameA').parent().parent().css("background", "-ms-linear-gradient(top, #000fff 0%,#000fff " + tank2 + "%,#ffff00 " + tank2 + "%,#ffff00 100%)")
$('#tank2FrameA').parent().parent().css("background", "linear-gradient(top, #000fff 0%,#000fff " + tank2 + "%,#ffff00 " + tank2 + "%,#ffff00 100%)")
在这我想造型添加到父。然而，作为一个测试，我添加了css来'.strip div' （成功为所有坦克），但我似乎无法做到这一点的每罐本身
我现在的CSS看起来像this
的两个警报声明％我想坦克是（即在颜色/梯度分割）。
我知道这可能是最糟糕的问题/至少明确今天的问题，但我会尽我所能澄清任何方面。
干杯的帮助。
这真的不能回答我的问题 – jbutler483 2014-11-25 13:32:34