开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >要显示的图像数组，基于%

问要显示的图像数组，基于%
EN

Stack Overflow用户

提问于 2011-04-09 16:26:33

回答 1查看 113关注 0票数 0

我有一个包含% s的表，我需要遍历一个图像数组，并根据%显示正确的图像。因此，在td.tri-img中，如果是20%，我需要使用jquery拉取triangle20.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>

EN

回答 1

Stack Overflow用户

发布于 2011-04-09 16:34:41

这样如何：

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);

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5606230

复制

相关文章

【JQuery】JQuery入门——JQuery 插件-validation

validate 是 jQuery 插件，及必须在 jQuery 的基础上进行运行。我们将导入 jQuery 库、 validate

陶然同学

2023/02/27

12.7K0

【JQuery】JQuery入门——JQuery 插件-validation

jquery http html bootstrap css

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。这些插件也是依赖于jQuery来完成的，所以必须要先引入

梨涡浅笑

2022/05/08

7.2K0

jquery http html bootstrap css

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。

星辰_大海

2020/10/09

6.8K0

jquery http html css bootstrap

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。这些插件也是依赖于jQuery来完成的，所以必须要先引入

清出于兰

2020/10/26

7.1K0

jQuery——插件

jquery 面向对象编程 javascript

简单来说：“jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

用户10196776

2022/11/22

15K0

1.页面 @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <ul id="ul"> <li>第一行</li> <li>第二行</li> <li>第三行</li> <li>第四行</li> <li>第五行</li> <li>第六行</li> </ul> <ul id="ul2"> <li>第一行</li> <li>第二行</li>

用户1055830

2018/01/18

4.1K0

RxJS 之于异步，就像 JQuery 之于 dom

jquery api node.js rxjs javascript

记得当年我刚学 JavaScript 的时候，是从原生的 dom api 学起的，用原生的 dom api 完成一些增删改的功能，之后就会学习 JQuery。

神说要有光zxg

2022/03/03

1.8K0

jQuery插件 -- Form表单插件jquery.form.js

jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进程的功能。另外，插件还包括其他的一些方法： formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。下载地址：

joshua317

2018/04/10

13.8K0

Python jquery标签云

很多知名博主都喜欢弄个标签云。今天特地看了下源码。把标签云的方法单独扣了出来。这里做一下记录

py3study

2020/01/09

1.5K0

Python jquery标签云

jQuery基础--插件

javascript jquery api jquery ui

官方API：http://api.jqueryui.com/category/all/

eadela

2019/09/29

3.5K0

jQuery Cookie 插件

javascript 网站 jquery https 网络安全

Query 可以通过 jquery.cookie.js 插件来操作 Cookie。

陈不成i

2021/07/22

6K0

jQuery插件jQueryUI

jQuery UI是一个功能丰富的jQuery插件集合，提供了一系列用户界面组件和效果，可用于创建交互性强、视觉效果丰富的网页应用程序。

堕落飞鸟

2023/05/18

2.8K0

jquery 滚轮插件 jquery.mousewheel.js

jquery github git 开源

jquery中没有鼠标滚轮事件，那么可以使用jquery的滚轮事件插件jquery.mousewheel.js。

Devops海洋的渔夫

2019/05/31

5K0

jQuery常用插件

css jquery 网络安全 javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

奋飛

2019/08/15

3.3K0

jquery ajaxform插件

xml html json javascript http

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script src="lib/jquery.form.js" type="text/javascript"></script> <script type="text/javascript"> // json

用户5760343

2019/10/10

8.4K0

jquery ajaxform插件

jQuery插件jQueryValidate

jQuery Validate是一个流行的jQuery表单验证插件，用于验证用户输入的表单数据。它提供了一组简单且强大的验证规则和选项，使开发人员能够轻松地实现客户端表单验证功能。

堕落飞鸟

2023/05/18

2.4K0

The jQuery UI CSS Framework

jQuery UI是 jquery官方推出的配合jquery使用的用户界面组件集合！包含了许多的界面操作功能，如我们常用的表格排序，拖拽，TAB选项卡，滚动条，相册浏览，日历控件，对话框等 JS插件~~可以很方便的开发用户界面上的功能，使得您的开发工作事半功倍~~不用写繁琐的JS代码。 jQuery UI提供了一个强大的CSS Framework，为用户定义使用jQuery widgets。其中的ThemeRoller更是让你随心所欲地操作设计不同风格的网页界面。 jQuery UI是一套基于jquery

张善友

2018/01/19

2.4K0

jQuery Verbose Calendar：显示整年的 jQuery 日历插件

jquery calendar 插件函数事件

jQuery Verbose Calendar 是一个可以把整年的日历显示在一个页面上的 jQuery 插件，加载之后，它会自动滚到今天的日期处，当你鼠标移动到日期上，可以显示今天星期几。并且这个日历插件支持 Callback 函数，当你点击某个日期的时候，你可以执行一些自定义行为，或者插入任意的 HTML 元素。

Denis

2023/04/15

2K0

教你开发jQuery插件（转）教你开发jQuery插件（转）

jquery git http html jquery ui

原文：http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html

用户1518699

2018/09/12

3.4K0

教你开发jQuery插件（转）
教你开发jQuery插件（转）

jquery弹窗插件dialog_jquery进度条插件

网页顶部进度条插件的有四五种，基本原理就是动态地创建一个元素，然后通过设置它的width来实现动画效果，width增长到达指定位置时，将其去掉。来看看nanobar.js作者jacoborus是怎么做到的吧！

全栈程序员站长

2022/08/04

4K0

相似问题

有没有不需要jQuery.UI的jQuery可排序插件

20

有没有可以替代html select标签的jQuery插件？

40

jQuery对话框插件就像广告一样

10

有没有jQuery投票插件？

27

有没有jquery的滚动插件？

30

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例