Блог

У меня есть таблица с %’s, и мне нужно просмотреть массив изображений и отобразить правильное изображение на основе%. Итак, в td.tri-img, если значение равно 20%, мне нужно извлечь triangle20.png, используя jquery, кстати.

РЕДАКТИРОВАТЬ: Итак, у меня есть это сейчас, с этим 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>amp;#37;</span></td>
            <td class="tri-img"><img class="three" src="" alt="" ><span>40</span><span>amp;#37;</span></td>
            <td class="tri-img"><img class="four" src="" alt="" ><span>35</span><span>amp;#37;</span></td>
            <td class="tri-img"><img class="five" src="" alt="" ><span>23</span><span>amp;#37;</span></td>
            <td class="tri-img"><img class="six" src="" alt="" ><span>22</span><span>amp;#37;</span></td>
            <td class="tri-img"><img class="seven" src="" alt="" ><span>50</span><span>amp;#37;</span></td>
            <td class="tri-img"><img class="eight" src="img/triangle.png" alt="" ><span></span><span>amp;#37;</span></td>
            <td class="tri-img"><img class="nine" src="img/triangle.png" alt="" ><span></span><span>amp;#37;</span></td>
        </tr>
  

как насчет этого:

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

вы можете использовать jQuery.каждое поверх _tds, а затем используйте 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);