0
previous question에서이어서 (필연적으로) 제작 과정에서 약간의 어려움이 있었지만 약간의 동적 설계가 변경되었습니다. 'T의 다른 실린더 모양이다동일한 클래스의 다른 인스턴스에 동적 CSS 추가하기
+------+ +------+
| T1 | | T2 |
| | | |
+------+ +------+
+------+ +------+
| T3 | | T4 |
| | | |
+------+ +------+
:
나는 화면과 같이 있습니다.
<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>
나는 (내가 이전 질문에서 사용 된 'bottom:50% 달리)'분할 '그 내용에 gradient로 갔다.
이 잘하면 쉽게 같은 어떤 것을 생성 할 것이다 : 나는 스트립의 parent 일부 CSS 스타일을 추가하는 것을 시도하고있다 그래서
+------------------+ +------------------+
| | | |
| +----------+ | | +----------+ |
| | 50% | | | | 25% | |
| | | | | | | |
| |----------| | | | | |
| | | | | |----------| |
| | | | | | | |
| +----------+ | | +----------+ |
+------------------+ +------------------+
을 (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%)")
이있는 나는 부모에게 스타일을 추가하고 싶었다. 그러나, 테스트로, 난 (모든 탱크에 대한 성공) '.strip div' 에 CSS를 추가,하지만 난 에 대한 자체
나의 현재 CSS를 this
등 보이는 각각의 탱크를이 작업을 수행 할 수없는 것 두 가지 경고는 탱크를 원하는 % % (즉, 색상/그라디언트의 분리)라고 말합니다.
오늘은 의 질문이 있으십니까? 질문입니다.하지만 어떤면을 명확히하기 위해 최선을 다할 것입니다.
환호성.
이 질문은 내 질문에 대한 답변이 아닙니다. – jbutler483