-
首先布局
html:默认选中第一个
css:<form class="form1"> <label class="type1" style="height:120px;"> <span>充值金额:</span> <div class="clearfix"> <span class="a-num active" RMB="10">10RMB<img class="select-img" src="images/icon/select-icon.png" alt=""></span> <span class="a-num" RMB="20">20RMB<img class="select-img" src="images/icon/select-icon.png" alt=""></span> <span class="a-num" RMB="30">30RMB<img class="select-img" src="images/icon/select-icon.png" alt=""></span> <span class="a-num" RMB="50">50RMB<img class="select-img" src="images/icon/select-icon.png" alt=""></span> <span class="a-num" RMB="100">100RMB<img class="select-img" src="images/icon/select-icon.png" alt=""></span> <span class="a-num" RMB="200">200RMB<img class="select-img" src="images/icon/select-icon.png" alt=""></span> <span class="a-num" RMB="300">300RMB<img class="select-img" src="images/icon/select-icon.png" alt=""></span> <span class="a-num" RMB="500">500RMB<img class="select-img" src="images/icon/select-icon.png" alt=""></span> <span class="a-num" RMB="1000">1000RMB<img class="select-img" src="images/icon/select-icon.png" alt=""></span> </div> </label> <label class="type2"> <span> </span> <div> <!-- 正则只匹配数字0-9 【str.replace(/[^\d]/g,'')】--> <input class="num_rmb" type="text" value="10" placeholder="请输入数据" onkeyup="this.value=this.value.replace(/[^\d]/g,'')"> RMB = <e>990</e>游戏币 = <f>9900</f>欢乐豆 </div> </label> </form>
html{margin:;padding:;font-size:px;}
.form1{width:px;margin: auto;padding:px px px;border:px solid #ccc;}
.form1 label{margin-top:px;display:block;font-weight:;}
.form1 div{width:px;float:right;margin-right:px;}
.form1 span{width:px;height:px;display:inline-block;text-align:right;line-height:px;color:#333;font-size:px;}
/* 设置相对定位 */
.form1 label .a-num{width:px;height:px;line-height:px;border:px solid #ececec;border-radius:px;display:inline-block;font-size:px;color:#333;text-align:center;margin-right:px;margin-bottom:px;position:relative;cursor:pointer;}
/* 设置绝对定位 选隐藏 */
.form1 label .a-num .select-img{position:absolute;bottom:;right:;display:none;}
/* 选中后加蓝色边框 显示小图片 */
.form1 label .active{border:px solid #229fe7;}
.form1 label .active .select-img{display:block;}
.num_rmb{margin-right:;width:px;height:px;line-height:px;border:px solid #ececec;border-radius:px;display:inline-block;font-size:px;color:#333;padding: px;}
jq 执行点击事件跟改变事件
<!-- 引用jq -->
<script src="js/jquery.min.js"></script>
<script>
// 点击a-num事件
$(".a-num").click(function(){
$(this).addClass("active").siblings().removeClass("active"); // 点击后选中添加active除其他兄弟元素的active
RMB = $(this).attr("RMB"); // 获取到金额
// console.log(RMB);
$(".num_rmb").val(RMB);
$(".num_rmb").parent().children("e").text($(".num_rmb").val()*) // 将值填入type2下面的(e)中
$(".num_rmb").parent().children("f").text($(".num_rmb").val()*) // 将值填入type2下面的(f)中
})
// 改变事件
$(".num_rmb").change(function(){
if($(this).val()<){ // 判断里面的值是否大于10,小于10让他大于10
$(".num_rmb").val();
}a-num
$(".a-num").removeClass("active"); // 移除a-num的选中事件
$(this).parent().children("e").text($(this).val()*) // 将值填入type2下面的(e)中
$(this).parent().children("f").text($(this).val()*) // 将值填入type2下面的(f)中
})
</script>
最终效果如上: