jQuery点击加减值或手动改变表单值特效

使用方法：

引入核心CSS样式（可根据自身项目样式进行修改）

.i_tips{height:30px;margin-left:20px;color:#f60;font-size:14px;line-height:30px}
.i_box{margin:10px 20px;font-size:14px;float:left}
.i_box *{vertical-align:middle}
.i_box a{padding:2px 5px;background-color:#e9e9e9;border:1px solid #ccc;text-decoration:none;color:#585858;line-height:20px}
.i_box a:hover{color:#000}
.i_box input{width:30px;height:18px;margin:0 8px;padding:2px;border:1px solid #ccc;text-align:center;line-height:16px}

引入jQuery库文件、插件JS文件

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/www.sucainiu.com.js"></script>

插件调用初始化、参数配置

//调用
$( function() {
	
	$('.i_box').iVaryVal({},function(value,index){
		$('.i_tips').html('你点击的表单索引是：'+index+'；改变后的表单值是：'+value);
	});
});

HTML结构

<div id="demo">
    <div class="i_tips"></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
    <div class="i_box"><a href="javascript:;" class="J_minus">-</a><input type="text" value="0" class="J_input" /><a href="javascript:;" class="J_add">+</a></div>
</div>