Question

我有一张带％的表，我需要运行一系列图像并根据％显示正确的图像。所以，在td.tri-img中，如果是20％，我需要使用jquery来拉三角形.png。

编辑：所以我现在有了这个JS，但我不能更有效地做到这一点，循环通过td并拉入跨度???：

function triangleImages() {
var _td = $('td#tri-first');
    var _percentage = $('td#tri-first span').html();
    //get the img element
    var _img = $('img#column1');
    //generate new source for img
    var _img_src = 'img/triangle' + _percentage + '.png';
    //set the src
    _img.attr('src', _img_src);
    }
    triangleImages();

这是表格：

            <tr class="tri-col">
            <td class="num-label">20</td>
            <td class="tri-img" id="tri-first"><img class="one" id="column1" src="" alt="" ><span>20</span></td>
            <td class="tri-img"><img class="two" src="" alt="" ><span>30</span><span>&#37;</span></td>
            <td class="tri-img"><img class="three" src="" alt="" ><span>40</span><span>&#37;</span></td>
            <td class="tri-img"><img class="four" src="" alt="" ><span>35</span><span>&#37;</span></td>
            <td class="tri-img"><img class="five" src="" alt="" ><span>23</span><span>&#37;</span></td>
            <td class="tri-img"><img class="six" src="" alt="" ><span>22</span><span>&#37;</span></td>
            <td class="tri-img"><img class="seven" src="" alt="" ><span>50</span><span>&#37;</span></td>
            <td class="tri-img"><img class="eight" src="img/triangle.png" alt="" ><span></span><span>&#37;</span></td>
            <td class="tri-img"><img class="nine" src="img/triangle.png" alt="" ><span></span><span>&#37;</span></td>
        </tr>

Answer 1

怎么样：

var _tds = jQuery('td.tri-img');

你可以在_tds上使用jQuery.each然后使用jQuery（'unique-td'）。children（'span'）。html（）来获取宽度

//get the td element
var _td = jQuery('#td_id');
var _width = _td.attr('width');
//remove % from width
var _width = _width.substr(0, _width.length - 1);
//get the img element
var _img = jQuery('#img_id');
//generate new source for img
var _img_src = 'img/triangle' + _width + '.png';
//set the src
_img.attr('src', _img_src);

基于％显示的图像数组

1 个答案: