Question

我有一个无序列表，最多可包含10个项目。每个li内都有一个数值。我希望第一个数字为绿色，最后一个数字为黄色，并且两者之间的数字相应地缩放。

我很好奇是否可以单独使用css3，或者如果我需要JavaScript来计算临时并应用它（我可能会自己编写一个JS解决方案，但我不知道它是值得一提）

基本上我会用缩放值替换number-good类（例如绿色）。

<ul id="dash-top-customer-list" class="tb-list">
    <li class="tb-list-item" data-dym-id="8">
        <span class="tb-list-name">OEM2</span><span class="tb-list-value number-good">$208,057</span>
    </li>
    <li class="tb-list-item" data-dym-id="13">
        <span class="tb-list-name">Potential3</span><span class="tb-list-value number-good">$206,988</span>
    </li>
    <li class="tb-list-item" data-dym-id="9">
        <span class="tb-list-name">REP1</span><span class="tb-list-value number-good">$191,029</span>
    </li>
    <li class="tb-list-item" data-dym-id="14">
        <span class="tb-list-name">Potential4</span><span class="tb-list-value number-good">$187,609</span>
    </li>
    <li class="tb-list-item" data-dym-id="15">
        <span class="tb-list-name">Potential5</span><span class="tb-list-value number-good">$183,372</span>
    </li>
</ul>

（这不是必须的，而且这个问题更像是一种好奇心 - 我很惊讶我找不到已经问过的相关问题（或者我的google-fu今天真的在罐子里））< / p>

Answer 1

如果您的列表正在更改，并且您想重新计算这些值，则可能需要考虑使用JavaScript。特别是如果你想订购清单。这听起来很像d3.js所帮助的，因此可能值得一看，因为它可以让你创建色标。

JS中的另一个选项是设置一个颜色数组，然后有一个switch语句，为DOM元素分配颜色。

如果它不是动态的，那么你可以在样式表中设置10个颜色/类，并为DOM元素提供你希望每个元素拥有的类。

Answer 2

或许这样的事情？

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
	colorizeListItems( document.getElementById('dash-top-customer-list'), -60, 120 );
}

function colorizeListItems(targetUl, hueRange, hueMin)
{
	var liNodeList = targetUl.getElementsByTagName('li');
	var liArray = [].slice.call(liNodeList);

	var valueArray = liArray.map( function(liElem) { return liElem.querySelectorAll('span')[1].textContent.replace(/,*\$*/g, ''); } );
	var largest,smallest,difference;
	largest = smallest = valueArray[0];
	valueArray.forEach( function(curVal) {if (curVal < smallest) smallest = curVal; if (curVal > largest) largest = curVal;} );
	difference = largest - smallest;

	liArray.forEach( function(elem, index)
					 {
						var curScaledVal = (valueArray[index] - smallest) / difference;
						var curHue = (curScaledVal * hueRange) + hueMin;
						var curStr = "hsl(" + curHue.toFixed(0) + ", 100%, 50%);";
						elem.setAttribute('style', 'background: ' + curStr);
					 }
					);
}

	<ul id="dash-top-customer-list" class="tb-list">
		<li class="tb-list-item" data-dym-id="8">
			<span class="tb-list-name">OEM2</span><span class="tb-list-value number-good">$8,000,000</span>
		</li>
		<li class="tb-list-item" data-dym-id="8">
			<span class="tb-list-name">OEM2</span><span class="tb-list-value number-good">$5,000,000</span>
		</li>
		<li class="tb-list-item" data-dym-id="8">
			<span class="tb-list-name">OEM2</span><span class="tb-list-value number-good">$6,000,000</span>
		</li>
		<li class="tb-list-item" data-dym-id="8">
			<span class="tb-list-name">OEM2</span><span class="tb-list-value number-good">$7,000,000</span>
		</li>
</ul>

列表上的颜色比例

2 个答案: