jq 根据值的正负变色
效果图这样:

意思就是根据最后的百分值变色,值为负变绿色,值为正变红色。
所以只要取到那个标签里的值了,就能根据正负的判断决定颜色。
我的html部分这样:
/*不过他们都说我的dom结构不太合理,同意。BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/
<div class="pro_detail">
<!-- 列表详细信息 -->
<ul>
<li>001</li>
<li>椰香奶茶</li>
<li>¥ 10.00</li>
<li>¥ 10.50</li>
<li>-5%</li>
</ul>
</div>
思路就是:找到每个UL最后一个li,获取它的值,根据正负来判断。
但是,我刚刚想到,如果是0也是会变绿色,是不是要这样呢?
JQ部分代码这样:
// 根据正负值变色
function oChange(){
var oUl = $(".pro_detail ul").length;//有多少行,行的个数 for(var a = 0;a<oUl;a++){ var s = $(".pro_detail ul").eq(a).find('li').eq(4).html().replace(/%/, '');//除去 % 的数字内容
// alert(s);
if(s>0){ //如果值为正 后两个元素变红
$(".pro_detail ul").eq(a).find('li').eq(3).css({
"color" : "#ff6363"
});
$(".pro_detail ul").eq(a).find('li').eq(4).css({
"color" : "#ff6363"
});
}
else{
$(".pro_detail ul").eq(a).find('li').eq(3).css({
"color" : "#3ebb2b"
});
$(".pro_detail ul").eq(a).find('li').eq(4).css({
"color" : "#3ebb2b"
});
}
}//f
}//for
oChange();
jq 根据值的正负变色的更多相关文章
- SVM中为何间隔边界的值为正负1
		
在WB二面中,问到让讲一下SVM算法. 我回答的时候,直接答道线性分隔面将样本分为正负两类,取平行于线性切割面的两个面作为间隔边界,分别为:wx+b=1和wx+ b = -1. 面试官就问,为什么是正 ...
 - radio值未出现JQ获取值问题
		
$('input:radio[name="modelExtend.manageType"]:checked').val(); 选中的获取的值不是空或者null而是on
 - 怎么根据Comparable方法中的compareTo方法的返回值的正负 判断升序 还是 降序?
		
public int compareTo(Student o) { return this.age - o.age; // 比较年龄(年龄的升序) } 应该理解成return (-1)×(thi ...
 - jQ实现图片无缝轮播
		
在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ( ̄▽ ̄)ノ. dom ...
 - sql server日期字段值的比较
		
sql server中对日期字段值的比较 sql server中对日期字段的比较方式有多种,介绍几种常用的方式:用northwind库中的employees表作为用例表.1.between...and ...
 - 使用padding值控制控件的隐藏与显示
		
在学自定义控件下拉刷新这一案例,控制ListView头条目和尾条目的显示隐藏时,就是设置其padding值的正负控制其的显示与隐藏.这并不是什么很大的知识点.只是一个小技巧,这里给大家分享一下. 这一 ...
 - Javascript和jquery事件--鼠标滚轮事件WheelEvent
		
<1>js事件 滚轮事件在js中,不同浏览器还是有不同的,介于我只测试谷歌和火狐浏览器的情况,其他浏览器有待自行探索.有三种写法: target.onmousewheel = wheel; ...
 - redis incr incrby decr decrby命令
		
incr.incrby.decr.decrby命令的作用和用法 redis中incr.incrby.decr.decrby属于string数据结构,它们是原子性递增或递减操作. incr递增1并返回递 ...
 - 移动端图片随手势移动react组件(附移动开发小tips)
		
这个效果是公司产品中一个用到的效果,用于展示项目的信息,废话少说,先上效果图,代码在最后:),这个组件是在上篇博客中用webpack搭建的环境中完成的http://www.cnblogs.com/wu ...
 
随机推荐
- jsp中的@include与jsp:include区别详解
			
1 前言 搞java开发的人也许都知道在jsp中引入项目中其他文件有如下两种方式 <%@include file="xxx.jsp"%> <jsp:include ...
 - Python Socket 网络编程
			
Socket 是进程间通信的一种方式,它与其他进程间通信的一个主要不同是:它能实现不同主机间的进程间通信,我们网络上各种各样的服务大多都是基于 Socket 来完成通信的,例如我们每天浏览网页.QQ ...
 - Could not load type 'System.Web.Mvc.ViewPage<dynamic>' in asp.net mvc2 after publishing the website
			
在WebConfig里 找到 <pages></pages> <pages pageParserFilterType="System.Web.Mvc.ViewT ...
 - mysql 文件导入方法总结
			
数据导入3三种方法 一.phpMyAdmin 限制大小:2M 1.创建数据库 2.导入.sql或.sql.zip文件 大数据导入方法一:http://jingyan.baidu.com/article ...
 - [LeetCode] Combination Sum 组合之和
			
Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C wher ...
 - 请求如何进入ASP.NET MVC框架
			
一.前言 对于WebForm开发,请求通常是一个以.aspx结尾的url,对应一个物理文件,从代码的角度来说它其实是一个控件(Page).而在MVC中,一个请求对应的是一个Controller里的Ac ...
 - 设计模式之单例模式——Singleton
			
设计模式之单例模式--Singleton 设计意图: 保证类仅有一个实例,并且可以供应用程序全局使用.为了保证这一点,就需要这个类自己创建自己的对象,并且对外有 ...
 - CSS Hack技术介绍及常用的Hack技巧集锦
			
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
 - Azure 带宽
			
Azure带宽与Azure Blob云存储 http://www.cnblogs.com/threestone/p/4497625.html
 - [转]Android自定义控件三部曲系列完全解析(动画, 绘图, 自定义View)
			
来源:http://blog.csdn.net/harvic880925/article/details/50995268 一.自定义控件三部曲之动画篇 1.<自定义控件三部曲之动画篇(一)—— ...