鼠标悬停实现div重写

最新推荐文章于 2023-06-03 12:50:35 发布

我有闪现

最新推荐文章于 2023-06-03 12:50:35 发布

阅读量217

点赞数

分类专栏： jquery js springboot 文章标签： java

本文链接：https://blog.csdn.net/T623048540/article/details/121217811

版权

js 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

springboot

4 篇文章 1 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

本文介绍了一个JavaScript事件处理程序，当用户鼠标悬停在用户购物车图标上时，会通过POST请求从服务器获取用户的购物车内容，并动态生成下拉菜单显示详细商品信息。同时，还展示了与后端的接口调用以及数据处理过程。

摘要由CSDN通过智能技术生成

$("#userShopCar").mouseover(function () {//根据id实现鼠标悬浮触发事件mouseCar
				$.post('pages/back/shopCar/showMyCar',{},function (res) {
					let car = $("#mouseCar");//获取想重写的div父类
					car.empty();//清空div子类元素
					let data = res.data;//循环 获得每组元素
					for (let x = 0;x<data.length;x++) {
						let g = data[x];
						let mouseCarDiv = $("<!--购物车鼠标悬停下拉菜单-->\n" +
								"\t\t\t\t\t\t\t\t\t\t<ol class=\"mini-products-list\">\n" +
								"\t\t\t\t\t\t\t\t\t\t\t<li>\n" +
								"\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"product-image\" href=\"product-details.html\">\n" +
								"\t\t\t\t\t\t\t\t\t\t\t\t\t<img src=\"../../../../path"+g.goods.img+"\" </a>\n" +
								"\t\t\t\t\t\t\t\t\t\t\t\t</a>\n" +
								"\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"product-details\">\n" +
								"\t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"cartproduct-name\">\n" +
								"\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"product-details.html\">"+g.goods.title+"</a>\n" +
								"\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n" +
								"\t\t\t\t\t\t\t\t\t\t\t\t\t<strong class=\"qty\">数量:"+g.count+"</strong>\n" +
								"\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"sig-price\">价格:"+g.goods.price+"</span>\n" +
								"\t\t\t\t\t\t\t\t\t\t\t\t</div>\n" +
								"\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"pro-action\">\n" +
								"\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"btn-remove\" href=\"#\">remove</a>\n" +
								"\t\t\t\t\t\t\t\t\t\t\t\t</div>\n" +
								"\t\t\t\t\t\t\t\t\t\t\t</li>\n" +
								"\t\t\t\t\t\t\t\t\t\t</ol>\n" +
								"\t\t\t\t\t\t\t\t\t\t</div>")
						car.append(mouseCarDiv);
					}
				})
			})

@RequestMapping("showMyCar")
    @ResponseBody
    ResponseDTO showMyCar(Model model){
        List<ShopCarVO> cars = shopCarService.findUserCars(config.getUserId());
        model.addAttribute("cars",cars);
        return ResponseDTO.ok("",cars);
    }

  /**
     * 返回简单成功消息
     * 并且返回data数据
     * @param msg
     * @return
     */
    public static ResponseDTO ok(String msg,Object data){
        return new ResponseDTO(msg,true,data,200,null);
    }