Добавление динамического css в разные экземпляры того же класса

Question

Следуя за previous question, я немного изменил свой динамический дизайн, хотя (очевидно) с некоторым трудом в его производстве.

У меня есть экран, как так:

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

два предупреждения указывают, что я хочу, чтобы танки были (т.е. разделение цветов/градиента).

Я знаю, что это, вероятно, худший вопрос/наименее понятный вопрос, но я постараюсь изо всех сил прояснить любые аспекты.

Приветствия за помощью.

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()), чтобы получить все предметы, окружающие танк.
• Вы не можете применять градиенты с префиксом поставщика к свойству 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'); 

---

Я видел в ваших CSS кадры с классом c имеют градиент с нанесенным !important. Я предполагаю, что вы хотите, чтобы серые полосы были переопределены сценарием. Существует другой способ без необходимости !important:

Внутренняя функция applyGradient var allframes содержит все рамы вокруг резервуара. Вы можете использовать .not(), чтобы исключить все элементы, соответствующие селектору внутри. В вашем случае последняя строка будет выглядеть следующим образом:

allFrames.not('.c').css('backgroundImage', csstext); 

Я надеюсь this DEMO показывает, что вы хотите достичь.