JS部分（2）

已于 2024-01-05 17:26:49 修改
阅读量359 收藏 7
点赞数
文章标签： javascript 开发语言 前端
于 2024-01-05 16:07:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51956317/article/details/135412062
版权

fore_productBuy.js

$(function () {
    //刷新下拉框
    $('#select_order_address_province').selectpicker('refresh');
    $('#select_order_address_city').selectpicker('refresh');
    $('#select_order_address_district').selectpicker('refresh');
    //改变订单信息时
    $('#select_order_address_province').change(function () {
        $.ajax({
            type: "GET",
            url: "/tmall/address/" + $(this).val(),
            data: null,
            dataType: "json",
            success: function (data) {
                $(".loader").hide();
                if (data.success) {
                    $("#select_order_address_city").empty();
                    $("#select_order_address_district").empty();
                    for (var i = 0; i < data.addressList.length; i++) {
                        var address_id = data.addressList[i].address_areaId;
                        var address_name = data.addressList[i].address_name;
                        $("#select_order_address_city").append("<option value='" + address_id + "'>" + address_name + "</option>")
                    }
                    for (var j = 0; j < data.childAddressList.length; j++) {
                        var childAddress_id = data.childAddressList[j].address_areaId;
                        var childAddress_name = data.childAddressList[j].address_name;
                        $("#select_order_address_district").append("<option value='" + childAddress_id + "'>" + childAddress_name + "</option>")
                    }
                    $('#select_order_address_city').selectpicker('refresh');
                    $("#select_order_address_district").selectpicker('refresh');
                    $("span.address_province").text($("#select_order_address_province").find("option:selected").text());
                    $("span.address_city").text($("#select_order_address_city").find("option:selected").text());
                    $("span.address_district").text($("#select_order_address_district").find("option:selected").text());
                } else {
                    alert("加载地区信息失败，请刷新页面再试！")
                }
            },
            beforeSend: function () {
                $(".loader").show();
            },
            error: function () {
                alert("加载地区信息失败，请刷新页面再试！")
            }
        });
    });
    $("#select_order_address_city").change(function () {
        $.ajax({
            type: "GET",
            url: "/tmall/address/" + $(this).val(),
            data: null,
            dataType: "json",
            success: function (data) {
                $(".loader").hide();
                if (data.success) {
                    $("#select_order_address_district").empty();
                    for (var i = 0; i < data.addressList.length; i++) {
                        var address_id = data.addressList[i].address_areaId;
                        var address_name = data.addressList[i].address_name;
                        $("#select_order_address_district").append("<option value='" + address_id + "'>" + address_name + "</option>")
                    }
                    $('#select_order_address_district').selectpicker('refresh');
                    $("span.address_city").text($("#select_order_address_city").find("option:selected").text());
                    $("span.address_district").text($("#select_order_address_district").find("option:selected").text());
                } else {
                    alert("加载地区信息失败，请刷新页面再试！")
                }
            },
            beforeSend: function () {
                $(".loader").show();
            },
            error: function () {
                alert("加载地区信息失败，请刷新页面再试！")
            }
        });
    });
    $("#select_order_address_district").change(function () {
        $("span.address_district").text($(this).find("option:selected").text());
    });
    $("#textarea_details_address").bind('input propertychange', function () {
        $(".address_details").text($(this).val());
    });
    $("#input_order_receiver").bind('input propertychange', function () {
        $(".user-name").text($(this).val());
    });
    $("#input_order_phone").bind('input propertychange', function () {
        $(".user-phone").text($(this).val());
    });
    $("input,textarea").focus(function () {
        styleUtil.specialBasicErrorHide($(this).prev("span").prev("label"));
    });

    //搜索框验证
    $('form').submit(function () {
        if ($(this).find("input[name='product_name']").val() === "") {
            alert("请输入关键字！");
            return false;
        }
    });
});
  1. 在 $(function(){...}) 中，定义了页面加载完成后的初始化操作和事件处理逻辑。
  2. 使用 selectpicker('refresh') 方法刷新下拉框的显示。
  3. 给 #select_order_address_province 绑定了 change 事件，当省份选择发生变化时，发送 AJAX 请求获取对应的城市和区域信息，并根据返回的数据动态更新城市和区域下拉框的选项。
  4. 给 #select_order_address_city 和 #select_order_address_district 绑定了 change 事件，当城市和区域选择发生变化时，发送 AJAX 请求获取对应的区域信息，并根据返回的数据动态更新区域下拉框的选项。
  5. 给 #textarea_details_address 绑定了 input 和 propertychange 事件，用于实时更新详细地址的显示。
  6. 给 #input_order_receiver 和 #input_order_phone 绑定了 input 和 propertychange 事件，用于实时更新收件人姓名和电话的显示。
  7. 给所有输入框和文本框绑定了 focus 事件，用于在输入框获取焦点时隐藏错误提示信息。

此外，代码中还包括了一个表单提交事件的处理，用于验证搜索框中是否输入了关键字，如果没有输入则会弹出提示信息并阻止表单提交。

总体来说，这段代码实现了订单地址选择、输入框内容实时更新和搜索框验证等功能。

fore_productBuyCar.js

$(function () {
    //搜索框验证
    $('form').submit(function () {
        if ($(this).find("input[name='product_name']").val() === "") {
            alert("请输入关键字！");
            return false;
        }
    });
    $(".tbody_checkbox>.cbx_select").click(function () {
        sumPrice();
    });
    $("#cbx_select_all,#J_SelectAllCbx2").click(function () {
        var yn = $(this).prop("checked");
        var obj = $("tr.orderItem_info");
        if (!yn) {
            $(".tbody_checkbox>.cbx_select").prop("checked", false);
            sumPrice();
            obj.removeClass("orderItem_selected");
            $("#J_Go").removeClass("selected");
        } else {
            $(".tbody_checkbox>.cbx_select").prop("checked", true);
            sumPrice();
            obj.addClass("orderItem_selected");
            $("#J_Go").addClass("selected");
        }
    });
    $(".item_amount>input[type=text]").bind('input propertychange', function () {
        var number = $(this).val();
        if (isNaN(number) || $.trim(number) === "") {
            $(this).val(1);
            $(this).prev("a").addClass("no_minus");
            return;
        }
        if (parseInt(number) >= 500) {
            $(this).val(500);
            number = 500;
            $(this).next("a").addClass("no_minus");
        } else if (parseInt(number) > 1 && parseInt(number) < 500) {
            $(this).prev("a").removeClass("no_minus");
            $(this).next("a").removeClass("no_minus");
        } else if (parseInt(number) <= 1) {
            $(this).val(1);
            number = 1;
            $(this).prev("a").addClass("no_minus");
        }
        var price = $(this).parents("tr").find(".orderItem_product_price").text();
        price = parseFloat(price.substring(1));
        var price_sum = parseFloat(price * parseInt(number));
        $(this).parents("tr").find(".orderItem_product_realPrice").text("￥" + price_sum.toFixed(1));
        sumPrice();
    });
});

function up(obj) {
    obj = $(obj);
    var number = obj.next("input");
    var value = parseInt(number.val());
    if (value > 1) {
        obj.removeClass("no_minus");
    } else {
        obj.addClass("no_minus");
    }
    if (obj.hasClass("no_minus")) {
        return true;
    } else {
        if (isNaN(number.val()) || $.trim(number.val()) === "" || parseInt(number.val()) <= 1) {
            number.val("1");
            obj.addClass("no_minus");
            return true;
        }
        value--;
        if (value < 500) {
            number.next("a").removeClass("no_minus");
        } else {
            number.next("a").addClass("no_minus");
        }
        var price = obj.parents("tr").find(".orderItem_product_price").text();
        price = parseFloat(price.substring(1));
        var price_sum = parseFloat(price * value);
        number.val(value);
        obj.parents("tr").find(".orderItem_product_realPrice").text("￥" + price_sum.toFixed(1));
        if (value === 1) {
            obj.addClass("no_minus");
        }
        sumPrice();
    }
}

function down(obj) {
    obj = $(obj);
    var number = obj.prev("input");
    var value = parseInt(number.val());
    if (value < 500) {
        obj.removeClass("no_minus");
    } else {
        obj.addClass("no_minus");
    }
    if (obj.hasClass("no_minus")) {
        return true;
    } else {
        if (isNaN(number.val()) || $.trim(number.val()) === "" || parseInt(number.val()) < 1) {
            number.val("1");
            return true;
        }
        obj.prevAll(".J_Minus").removeClass("no_minus");
        value++;
        var price = obj.parents("tr").find(".orderItem_product_price").text();
        price = parseFloat(price.substring(1));
        var price_sum = parseFloat(price * value);
        obj.parents("tr").find(".orderItem_product_realPrice").text("￥" + price_sum.toFixed(1));
        number.val(value);
        sumPrice();
    }
}

function sumPrice() {
    var price_sum = 0.00;
    var obj = $("input.cbx_select:checked").parents("tr.orderItem_info");
    obj.each(function () {
        price_sum += parseFloat($(this).find(".orderItem_product_realPrice").text().substring(1));
    });
    $(".total_value").text(price_sum.toFixed(2));

    if (obj.length > 0) {
        $("#J_Go").addClass("selected");
    } else {
        $("#J_Go").removeClass("selected");
    }
    $("#J_SelectedItemsCount").text(obj.length);
}

function create(obj) {
    obj = $(obj);
    if (!obj.hasClass("selected")) {
        return true;
    }
    var orderItemMap = {};
    var tr = $("input.cbx_select:checked").parents("tr.orderItem_info");
    tr.each(function () {
        var key = $(this).find(".input_orderItem").attr("name");
        orderItemMap[key] = $(this).find(".item_amount").children("input").val();
    });
    $.ajax({
        url: "/tmall/orderItem",
        type: "PUT",
        data: {
            "orderItemMap": JSON.stringify(orderItemMap)
        },
        traditional: true,
        success: function (data) {
            if (data.success) {
                location.href = "/tmall/order/create/byCart?order_item_list=" + data.orderItemIDArray;
                return true;
            } else {
                alert("购物车商品结算异常，请稍候再试！");
                location.href = "/tmall/cart";
            }
        },
        beforeSend: function () {
        },
        error: function () {
            alert("购物车商品结算异常，请稍候再试！");
            location.href = "/tmall/cart";
        }
    });
}
  1. 在 $(function(){...}) 中，定义了页面加载完成后的初始化操作和事件处理逻辑。
  2. 给表单绑定了 submit 事件，用于验证搜索框中是否输入了关键字，如果没有输入则会弹出提示信息并阻止表单提交。
  3. 给 .tbody_checkbox>.cbx_select 元素绑定了 click 事件，当商品复选框被点击时，调用 sumPrice() 方法计算选中商品的总价。
  4. 给 #cbx_select_all 和 #J_SelectAllCbx2 元素绑定了 click 事件，实现全选和全不选的功能，并调用 sumPrice() 方法重新计算选中商品的总价。
  5. 给 .item_amount>input[type=text] 元素绑定了 input 和 propertychange 事件，用于实时更新商品数量变化后的价格，并调用 sumPrice() 方法重新计算选中商品的总价。

除此之外，还定义了一些全局函数：

  1. up(obj) 和 down(obj) 分别用于增加和减少商品数量，并实时更新对应商品的价格，并最终调用 sumPrice() 方法重新计算选中商品的总价。
  2. sumPrice() 方法用于计算选中商品的总价，并更新页面中的总价和选中商品数量的显示。
  3. create(obj) 方法用于结算购物车中选中的商品，发送 AJAX 请求将选中商品的信息传递给服务器进行结算，根据返回的数据进行相应的页面跳转或提示信息显示。

总体来说，这段代码实现了购物车页面中商品的选择、数量修改、总价计算和结算功能。

fore_productList.js

$(function () {
    //搜索框验证
    $('form').submit(function () {
        if ($(this).find('input[name="product_name"]').val() === '') {
            alert('请输入关键字！');
            return false;
        }
    });
    //点击li排序时
    $('.context_menu li').click(function () {
        //获取排序字段
        var orderBy = $(this).attr('data-name');
        //判断排序顺序及样式设置
        var isDesc = true;
        if (orderBy === 'product_sale_price') {
            if ($(this).children(".orderByDesc").hasClass("orderBySelect")) {
                isDesc = false;
            }
        }
        //检索
        if ($(this).parent('ul').attr('data-value') === undefined) {
            location.href = '/tmall/product/0/20?orderBy=' + orderBy + "&isDesc=" + isDesc + "&category_id=" + $(this).parent('ul').attr('data-type');
        } else {
            location.href = '/tmall/product/0/20?orderBy=' + orderBy + "&isDesc=" + isDesc + "&product_name=" + $(this).parent('ul').attr('data-value');
        }
    });
    //点击产品图片时
    $(".context_product_imgList>li").click(function () {
        var url = $(this).children("img").attr("src");
        if (url !== undefined) {
            $(this).parent("ul").prev("a").children(".context_product_imgMain").attr("src", url);
        }
    });
});
  1. 在 $(function(){...}) 中，定义了页面加载完成后的初始化操作和事件处理逻辑。
  2. 给表单绑定了 submit 事件，用于验证搜索框中是否输入了关键字，如果没有输入则会弹出提示信息并阻止表单提交。
  3. 给 .context_menu li 元素绑定了 click 事件，当用户点击排序菜单中的选项时，根据选项的属性获取排序字段和排序顺序，然后根据不同的情况拼接不同的请求URL，并进行页面跳转。
  4. 给 .context_product_imgList>li 元素绑定了 click 事件，当用户点击产品图片列表中的某张图片时，获取该图片的URL，并将其设置为主要展示图片的URL。

总体来说，这段代码实现了产品搜索页面中的搜索框验证、排序功能和产品图片切换功能。

fore_productDetails.js

$(function () {
    var ul = $(".context_ul_goodsList").children("ul");

    $(".J_GoodsDetails").addClass("tab-selected");
    $(".context_img_li").eq(0).addClass("context_img_li_hover");

    //搜索框验证
    $('form').submit(function () {
        if ($(this).find("input[name='product_name']").val() === "") {
            alert("请输入关键字！");
            return false;
        }
    });
    //移入预览图片列表时
    $(".context_img_li").mouseenter(function () {
        var img = $(this).children("img");
        $(".context_img_main").attr("src", img.attr("src"));
        $(".context_img_ks").children("img").attr("src", img.attr("src"));
        $(".context_img_li").removeClass("context_img_li_hover");
        $(this).addClass("context_img_li_hover");
    });
    //产品数量框验证
    $(".amount_value_up").click(function () {
        var number = parseInt($(".context_buymember").val());
        number++;
        $(".context_buymember").val(number);
    });
    $(".amount_value-down").click(function () {
        var number = parseInt($(".context_buymember").val());
        if (number > 1) {
            number--;
            $(".context_buymember").val(number);
        }
    });
    $(".context_buymember").on("input", function () {
        if ($(this).val() === "") {
            $(this).val(1);
        }
        if (parseInt($("#stock").val()) < parseInt($(this).val())) {
            $(".context_buyNow").addClass("context_notBuy").attr("disabled", "disabled");
            $(".context_addBuyCar").addClass("context_notCar").attr("disabled", "disabled");
        } else {
            $(".context_buyNow").removeClass("context_notBuy").attr("disabled", null);
            $(".context_addBuyCar").removeClass("context_notCar").attr("disabled", null);
        }
    });
    //点击猜你喜欢翻页按钮时
    $(".ul_trigger_up").click(function () {
        var ulTop = parseInt(ul.css("top"));
        var fTop = ulTop + 480;
        if (fTop > 0) {
            ul.animate({
                top: ulTop + 40
            }, 100, function () {
                ul.animate({
                    top: 0
                }, 100);
            });
        } else {
            ul.animate({
                top: fTop
            }, 200);
        }
    });
    $(".ul_trigger_down").click(function () {
        var ulTop = parseInt(ul.css("top"));
        var fTop = ulTop - 480;
        if (ul.height() < 2880) {
            getGuessLoveProducts();
        }
        if (fTop < -2400) {
            ul.animate({
                top: ulTop - 40
            }, 100, function () {
                ul.animate({
                    top: -2400
                }, 100);
            });
        } else {
            ul.animate({
                top: fTop
            }, 200);
        }
    });
    //放大镜逻辑
    $(".context_img_main").mouseenter(function () {
        $(".context_img_winSelector").show();
        $(".context_img_ks").show().children("img").attr("src", $(this).attr("src"));
    });
    $(".context_img_winSelector").mouseleave(function () {
        $(".context_img_winSelector").hide();
        $(".context_img_ks").hide();
    });
    $(".context_img_main,.context_img_winSelector").mousemove(function (e) {
        SelectorMousemove(e);
    });
    //模态窗口登录
    $(".loginForm").unbind("submit").submit(function () {
        var yn = true;
        $(this).find(":text,:password").each(function () {
            if ($.trim($(this).val()) === "") {
                styleUtil.errorShow($("#error_message_p"), "请输入用户名和密码！");
                yn = false;
                return yn;
            }
        });
        if (yn) {
            $.ajax({
                type: "POST",
                url: "/tmall/login/doLogin",
                data: {"username": $.trim($("#name").val()), "password": $.trim($("#password").val())},
                dataType: "json",
                success: function (data) {
                    $(".loginButton").val("登 录");
                    if (data.success) {
                        location.reload();
                    } else {
                        styleUtil.errorShow($("#error_message_p"), "用户名和密码错误！");
                    }
                },
                error: function (data) {
                    $(".loginButton").val("登 录");
                    styleUtil.errorShow($("#error_message_p"), "服务器异常，请刷新页面再试！");
                },
                beforeSend: function () {
                    $(".loginButton").val("正在登录...");
                }
            });
        }
        return false;
    });
    //关闭模态窗口
    $(".closeLoginDiv").click(function () {
        $(".loginModel").hide();
        $(".loginDiv").hide();
    });
});

function getDetailsPage(obj, className) {
    $(".J_TabBarBox").find("li").removeClass("tab-selected");
    $(obj).parent("li").addClass("tab-selected");
    $(".J_choose").children("div").hide();
    $("." + className).show();
}

function SelectorMousemove(e) {
    var $img = $(".context_img_main");
    var $selector = $(".context_img_winSelector");
    var $imgWidth = $img.width();
    var $imgHeight = $img.height();
    var $selectorWidth = $selector.width();
    var $selectorHeight = $selector.height();
    /*扫描器的定位*/
    //获取光标正中位置
    var x = e.pageX - $img.offset().left - $selectorWidth / 2;
    var y = e.pageY - $img.offset().top - $selectorHeight / 2;
    x = x < 0 ? 0 : x;
    y = y < 0 ? 0 : y;
    x = x > $imgWidth - $selectorWidth ? $imgWidth - $selectorWidth : x;
    y = y > $imgHeight - $selectorHeight ? $imgHeight - $selectorHeight : y;
    $selector.css({left: x, top: y});
    //1.917为转换系数
    $('.context_img_ks>img').css({
        left: -x * 1.917,
        top: -y * 1.917
    });
}

function getGuessLoveProducts() {
    $.ajax({
        type: "GET",
        url: "/tmall/guess/" + $("#tid").val(),
        data: {"guessNumber": $("#guessNumber").val()},
        dataType: "json",
        success: function (data) {
            if (data.success) {
                $("#guessNumber").val(data.guessNumber);
                for (var i = 0; i < data.loveProductList.length; i++) {
                    var src = data.loveProductList[i].singleProductImageList[0].productImage_src;
                    var product_id = data.loveProductList[i].product_id;
                    var product_sale_price = data.loveProductList[i].product_sale_price;
                    $(".context_ul_goodsList").children("ul").append("<li class='context_ul_main'><div class='context_ul_img'>" +
                        "<a href='/tmall/product/" + product_id + "'><img src='/tmall/res/images/item/productSinglePicture/" + src + "'/></a><p>¥" + product_sale_price + ".00</p></div></li>"
                    );
                }
            }
        }
    });
}
  1. 在 $(function(){...}) 中，定义了页面加载完成后的初始化操作和事件处理逻辑。
  2. 给表单绑定了 submit 事件，用于验证搜索框中是否输入了关键字，如果没有输入则会弹出提示信息并阻止表单提交。
  3. 给 .context_img_li 元素绑定了 mouseenter 事件，当鼠标移入预览图片列表时，切换主要展示图片和预览图片，并设置相应的样式。
  4. 给 .amount_value_up 和 .amount_value-down 元素绑定了 click 事件，用于增加和减少产品数量，并根据库存数量设置购买按钮的状态。
  5. 给猜你喜欢翻页按钮绑定了 click 事件，实现猜你喜欢产品列表的翻页功能，并根据返回的数据动态添加产品信息。
  6. 实现了放大镜逻辑，当鼠标移入主要展示图片时，显示放大镜，并根据鼠标位置设置放大镜和放大图片的位置。
  7. 实现了模态窗口登录功能，验证用户名和密码是否为空，然后发送 AJAX 请求进行登录验证，根据返回的数据进行相应的页面跳转或提示信息显示。
  8. 实现了关闭模态窗口的功能，当点击关闭按钮时，隐藏模态窗口和登录框。

除此之外，还定义了一些全局函数：

  1. getDetailsPage(obj, className) 用于切换产品详情页面的选项卡内容。
  2. SelectorMousemove(e) 用于实现放大镜功能中鼠标移动时放大镜和放大图片的位置变化。
  3. getGuessLoveProducts() 用于获取猜你喜欢产品列表的数据，并动态添加到页面中。

总体来说，这段代码实现了产品详情页面中的搜索框验证、图片预览、产品数量验证、猜你喜欢翻页、放大镜逻辑、模态窗口登录和关闭模态窗口等功能。

Nolаn
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值