返回小米商品详情页......登陆

小米商品详情页面jq

选择角色2019-04-06 19:24:07313
$(function () {
//默认选中第一个
$('.detail_color_left').eq(0).addClass('checked');
$('.detail_much_left').eq(0).addClass('checked');
updateTotalPrice();
changeClass('.detail_much_left', 'checked');//改变版本
changeClass('.detail_color_left', 'checked');//改变颜色
changeClass('.shop_detail_bz1', 'checked', '.shop_detail_button');//服务保障
function changeClass(clickClass, addClass, istrue) {
$(clickClass).click(function () {
if (!istrue) {//判断第三变量
$(clickClass).removeClass(addClass);
$(this).addClass(addClass);
} else {
$(this).find(istrue).toggleClass(addClass);//class有无取反
}
updateTotalPrice();
});
}
//统计总价格
function updateTotalPrice() {
//版本价钱
var version = parseFloat($(".detail_much_left[class$='checked']").find('span').attr('data-val'));
//服务价钱
var serviceNum = $(".fa-check-circle[class$='checked']").parent('.shop_detail_bz1').find('span[data-val]');//选中标签父元素内包含的span标签内data-val的值
var svprice = 0;
for (var i = 0; i < serviceNum.length; i++) {
svprice += parseFloat(serviceNum[i].getAttribute('data-val'));
}
//总价值
var totalprice = version + svprice;
$('#phonePrice').html(version + '元');//小字
$('#totalPrice').html('总计&nbsp;:&nbsp;' + totalprice + '元');//大字
}
})

UC截图20190406191321.png

UC截图20190406191200.png


jq重要。而且简单方便,思想和原生js都差不多。


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送