JQ+ ES6模板字符串 + $.each(数组, function(index, 数组中的对象) {操作程序} 循环遍历添加新html结构标签

(function() {// 1. 准备相关数据var hotData = [{city: "北京", // 城市sales: "25, 179", // 销售额flag: true, //  上升还是下降brands: [//  品牌种类数据{ name: "可爱多", num: "9,086", flag: true },{ name: "娃哈哈", num: "8,341", flag: true },{ name: "喜之郎", num: "7,407", flag: false },{ name: "八喜", num: "6,080", flag: false },{ name: "小洋人", num: "6,724", flag: false },{ name: "好多鱼", num: "2,170", flag: true }]},{city: "河北",sales: "23,252",flag: false,brands: [{ name: "可爱多", num: "3,457", flag: false },{ name: "娃哈哈", num: "2,124", flag: true },{ name: "喜之郎", num: "8,907", flag: false },{ name: "八喜", num: "6,080", flag: true },{ name: "小洋人", num: "1,724", flag: false },{ name: "好多鱼", num: "1,170", flag: false }]},{city: "上海",sales: "20,760",flag: true,brands: [{ name: "可爱多", num: "2,345", flag: true },{ name: "娃哈哈", num: "7,109", flag: true },{ name: "喜之郎", num: "3,701", flag: false },{ name: "八喜", num: "6,080", flag: false },{ name: "小洋人", num: "2,724", flag: false },{ name: "好多鱼", num: "2,998", flag: true }]},{city: "江苏",sales: "23,252",flag: false,brands: [{ name: "可爱多", num: "2,156", flag: false },{ name: "娃哈哈", num: "2,456", flag: true },{ name: "喜之郎", num: "9,737", flag: true },{ name: "八喜", num: "2,080", flag: true },{ name: "小洋人", num: "8,724", flag: true },{ name: "好多鱼", num: "1,770", flag: false }]},{city: "山东",sales: "20,760",flag: true,brands: [{ name: "可爱多", num: "9,567", flag: true },{ name: "娃哈哈", num: "2,345", flag: false },{ name: "喜之郎", num: "9,037", flag: false },{ name: "八喜", num: "1,080", flag: true },{ name: "小洋人", num: "4,724", flag: false },{ name: "好多鱼", num: "9,999", flag: true }]}];//  2. 根据数据渲染各省热销 sup 模块内容// (1) 遍历 hotData对象var supHTML = "";$.each(hotData, function(index, item) {// console.log(item);supHTML += `<li><span>${item.city}</span><span> ${item.sales} <s class=${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;});// 把生成的5个小li字符串给 sub dom盒子$(".sup").html(supHTML);// 3. 当鼠标进入 tab 的时候// 鼠标经过当前的小li要高亮显示$(".province .sup").on("mouseenter", "li", function() {index = $(this).index();render($(this));});// 声明一个函数 里面设置sup当前小li高亮还有 对应的品牌对象渲染// 这个函数需要传递当前元素进去function render(currentEle) {currentEle.addClass("active").siblings().removeClass();// 拿到当前城市的品牌对象// console.log($(this).index());// 可以通过hotData[$(this).index()] 得到当前的城市// console.log(hotData[$(this).index()]);// 我们可以通过hotData[$(this).index()].brands 拿到的是城市对象的品牌种类// console.log(hotData[$(this).index()].brands);// 开始遍历品牌数组var subHTML = "";$.each(hotData[currentEle.index()].brands, function(index, item) {// 是对应城市的每一个品牌对象// console.log(item);subHTML += `<li><span>${item.name}</span><span> ${item.num}<s class=${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;});// 把生成的6个小li字符串给 sub dom盒子$(".sub").html(subHTML);}// 4. 默认把第一个小li处于鼠标经过状态var lis = $(".province .sup li");lis.eq(0).mouseenter();// 5 开启定时器var index = 0;var timer = setInterval(function() {index++;if (index >= 5) index = 0;// lis.eq(index).mouseenter();render(lis.eq(index));}, 2000);$(".province .sup").hover(// 鼠标经过事件function() {clearInterval(timer);},// 鼠标离开事件function() {clearInterval(timer);timer = setInterval(function() {index++;if (index >= 5) index = 0;// lis.eq(index).mouseenter();render(lis.eq(index));}, 2000);});
})();

JQ+ ES6模板字符串 + $.each(数组, function(index, 数组中的对象) {操作程序} 循环遍历添加新html结构标签相关推荐

数组中的对象的特征值提取生成新对象实现方法
最近要做一个可视化的SQL语句生成功能视图, 项目中遇到一个JSON保存后还原的问题,由于保存之前和后台沟通约定好保存的JSON格式,所以在还原的时候,就要按照保存的格式来进行逆向解析. 首先来看一下 ...
如何检查数组是否包含JavaScript中的对象？
In this article, we will look at various methods to check if an array includes an object in JavaScri ...
[ 前端开发 ] ES6模板字符串
ES6模板字符串模板字符串是 ES6 的新特性,他的作用是减少了字符串的拼接操作,提高了程序的可读性接下来看一个栗子
ajax 中$.each(json,function(index,item){ }); 中的2个参数表示什么意思?
$.each(json,function(index,item) 里面的index代表当前循环到第几个索引,item表示遍历后的当前对象,比如json数据为:[{"name":&q ...
重学ES6 模板字符串
在两三年前,jQuery还是比较主流的开发技术,当我们要为页面添加DOM时,一般,我们是这样写的 $("#container").append('Today is <b> ...
js es6 模板字符串和使用
模板字符串描述: 模板字符串使用反引号 (``) 来代替普通字符串中的用双引号和单引号.模板字符串可以包含特定语法(${expression})的占位符.占位符中的表达式和周围的文本会一起传递给一个默 ...
ES6 模板字符串 ``
参考原文链接 1. 使用JavaScript输出字符串,通常是下面这样的: console.log("He is <b>"+person.name+"< ...
javascript中实例对象和构造函数关系、原型语法、原型链、call实现继承、apply调用函数、bind拷贝函数、拷贝继承、class类、super、严格模式、高阶函数、闭包、递归、es6简介
实例对象和构造函数的关系及原型: 实例对象是通过构造函数创建出来的,实例对象的构造器constructor就是指向构造函数的:每个实例对象中的同一方法的指向是各不相同的,但是其属性值相同的属性可以相同 ...
jquery $.each(data, function (index, value) {
在json中常常碰到这样的代码: 遍历处理data,可以是数组.DOM.json等,取决于直接给定或者ajax返回的类型 function (index, value)中index是当前元素的位置,v ...

JQ+ ES6模板字符串 + $.each(数组, function(index, 数组中的对象) {操作程序} 循环遍历添加新html结构标签

JQ+ ES6模板字符串 + $.each(数组, function(index, 数组中的对象) {操作程序} 循环遍历添加新html结构标签相关推荐

最新文章

热门文章