Question

继previous question之后，我略微改变了我的动态设计，虽然（显然）在制作上有些困难。

我有一个这样的屏幕：

+------+  +------+ 
|  T1  |  |  T2  |
|      |  |      |
+------+  +------+
+------+  +------+ 
|  T3  |  |  T4  |
|      |  |      |
+------+  +------+

＆＃39; 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分裂＆＃39;他们的内容（与前一个问题中使用的＆{39; bottom:50%不同）。

希望能够更容易地生成以下内容：

+------------------+    +------------------+
|                  |    |                  |
|   +----------+   |    |   +----------+   |
|   |   50%    |   |    |   |   25%    |   |
|   |          |   |    |   |          |   |
|   |----------|   |    |   |          |   |
|   |          |   |    |   |----------|   |
|   |          |   |    |   |          |   |
|   +----------+   |    |   +----------+   |
+------------------+    +------------------+

所以，我正在尝试将一些css样式添加到条带的parent（在jquery的第二部分中显示），其中应该成为类＆＃34; strip＆＃ 34;我想加入。

所以我试图使用：

 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

这两个警报表明我想要坦克的％（即颜色/渐变的分割）。

我知道这可能是今天最糟糕/最不明确的问题，但我会尽力澄清任何方面。

欢呼帮助。

Answer 1

使用每个功能循环。它循环遍历在。

中指定的所有选定元素的功能

我曾经解决过一次：

<div class="parent commonclass">
<div class="child"></div>
</div>

<div class="parent commonclass">
<div class="child"></div>
</div>

脚本就像：

$('commonclass').each(function(){
 $(this).find('.child').css({'background':'grey'});
});

希望有所帮助

Answer 2

使用$('div', $('#tank2FrameA').parent())获取坦克周围的所有div。
您无法通过该方式将以供应商为前缀的渐变应用于background属性。刚才每个.css(...)都会覆盖前一个#tank1FrameA，因此只会应用最后一个"VALUE"。您必须进行支持测试（此处已完成var vendors = { "-moz-linear-gradient": "(top, #000fff 0%, #000fff " + "VALUE" + "%, #ffff00 " + "VALUE" + "% #ffff00 100%)", "-webkit-gradient": "(linear, left top, left bottom, color-stop(0%,#000fff), color-stop(" + "VALUE" + "%,#000fff), color-stop(" + "VALUE" + "%,#ffff00), color-stop(100%,#ffff00))", "-webkit-linear-gradient": "(top, #000fff 0%,#000fff " + "VALUE" + "%,#ffff00 " + "VALUE" + "%,#ffff00 100%)", "-o-linear-gradient": "(top, #000fff 0%,#000fff " + "VALUE" + "%,#ffff00 " + "VALUE" + "%,#ffff00 100%)", "-ms-linear-gradient": "(top, #000fff 0%,#000fff " + "VALUE" + "%,#ffff00 " + "VALUE" + "%,#ffff00 100%)", "linear-gradient": "(top, #000fff 0%,#000fff " + "VALUE" + "%,#ffff00 " + "VALUE" + "%,#ffff00 100%)" }, gradient = $('#tank1FrameA').css('backgroundImage').split('(')[0]; function applyGradient(tank) { var aframe = $('#' + tank + 'FrameA'), allFrames = $('div', aframe.parent()), value = 100 - parseInt(aframe.text()), csstext = gradient + vendors[gradient].replace(/VALUE/g, value); allFrames.css('backgroundImage', csstext); } applyGradient('tank1'); applyGradient('tank2');）并使用浏览器返回的类型。
将所有渐变类型存储在对象中以避免重复。在每个字符串中插入关键字c，后来被替换为坦克的实际值。支持测试的结果将选出正确的字符串。
其余代码包含在将在每个坦克上调用的函数中。

!important

我在您的css框架中看到类!important的渐变应用了applyGradient。我假设你想要防止他们被脚本覆盖的灰色条纹。还有另一种方法，不需要allframes：

内部函数.not() var allFrames.not('.c').css('backgroundImage', csstext);包含坦克周围的所有框架。您可以使用{{1}}排除与内部选择器匹配的所有元素。在你的情况下，最后一行看起来像：

{{1}}

我希望this DEMO能够展示您想要实现的目标。

将动态css添加到同一个类的不同实例

2 个答案: