开发功能归纳
例子都有对应测试数据可以跑通查看
目录
1.搜索跳转,判空后再执行后续动作
// 回车动作
$('.check_empty').off("keydown").on("keydown", function (e) {
let {
keyCode
} = e;
let p = $(this).closest('.search-form')
if (keyCode == 13) {
$(this).val($(this).val().trim())
let val = p.find('.check_empty').val()
let reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
flag = reg.test(val);
if (flag) {
// $(this).attr("type", "submit");
} else {
return false
}
}
});
// 点击搜索动作
$('.search-btn').off("click").on("click", function (e) {
let p = $(this).closest('.search-form')
let val = p.find('.check_empty').val()
let reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
flag = reg.test(val);
if (flag) {
$(this).attr("type", "submit");
}
});
2.自定义下拉框,点击后需要赋值给匹配name名的input存值
// 回车动作
$('.j-value').off("click").on("click", function (e) {
let p = $(this).closest('.j-form');
let meSubmit = p.is('.meSubmit') || false; // 手动触发
let key = $(this).attr('data-key');// name 名
let newval = $(this).attr('data-value');// 点击的value
let target = p.find(`input[name=${key}]`);// 最后form表单提交的value input标签
let targetView = p.find(`div[name=${key}]`);// 显示作用的文本标签
target.attr('value', newval);
targetView.text(newval);
if (!meSubmit) {
$('.j-form').submit();
} else {
$(document).click();
}
});
3.同级标签切换类名逻辑
/*
onlyoneInit() => 初始化配置
click或者hover事件初始化,通过循环initArr 区分hover和click 对应的dom名称,再分别进行对应的初始化处理
onlyOneHandleDom() => 封装了大部分相同的逻辑代码
*/
onlyoneInit();
// 初始化事件
function onlyoneInit() {
// console.time();
// 配置
let initArr = [{ // 鼠标hover事件
evenType: 'hover',
bind: '.hover-onlyone', //事件元素
bind_parent: '.hover-onlyone-parent', //事件元素li的上级
bind_son: '.hover-onlyone-li', //事件元素
bind_borther: '.hover-onlyone-brother', //联动事件元素
targetClass: '.endadd', //如果存在则变为最后的添加类名元素
alsoadd: '.alsoadd', //一起添加行为类名的元素
addClass: 'active', //行为类名
animation_type: '.isslide', // 动画类型 slideUp slideDown
animation_dom: '.togglebox', // 动画切换的dom
returnMob: '.mobileReturn', //手机端停止触发
saveClass: '.endSaveClass', //hover移出的时候不改变行为
},
{ // 点击事件
evenType: 'click',
bind: '.click-onlyone', //事件元素
bind_parent: '.click-onlyone-parent', //事件元素li的上级
bind_son: '.click-onlyone-li', //事件元素
bind_borther: '.click-onlyone-brother', //联动事件元素
targetClass: '.endadd', //如果存在则变为最后的添加类名元素
alsoadd: '.alsoadd', //一起添加行为类名的元素
addClass: 'active', //行为类名
animation_type: '.isslide', // 动画类型 slideUp slideDown
animation_dom: '.togglebox', // 动画切换的dom
returnMob: '.mobileReturn', //手机端停止触发
saveClass: '.endSaveClass', //hover移出的时候不改变行为
},
]
// 循环配置
for (let i = 0; i < initArr.length; i++) {
let item = initArr[i];
let {
evenType,
bind,
bind_parent
} = item;
if ($(bind_parent).length == 0) continue
switch (evenType) {
case 'hover':
$(bind).hover(function () {
onlyOneHandleDom(item, $(this))
});
break;
case 'click':
$(bind).off("click").on("click", function (myeven) {
onlyOneHandleDom(item, $(this))
myeven.stopPropagation();
});
break;
}
}
}
// 添加类名逻辑
function onlyOneHandleDom(myconfig, that) {
let {
evenType,
bind,
bind_parent,
bind_son,
bind_borther,
targetClass,
alsoadd,
addClass,
animation_type,
animation_dom,
returnMob,
saveClass
} = myconfig;
let ismobile = that.closest(bind_parent).is(returnMob); //mobile端不执行
let bind_index = that.closest(bind_son).index();
let save = that.closest(bind_parent).is(saveClass); //保持类名
let p = that.closest(bind_parent); // 父级dom
let son = p.find(bind_son).find(targetClass); // 父级下的son dom集合
let brother = p.find(bind_borther).find(targetClass); // 父级下与son联动的brother dom集合
let target = that.closest(bind_son).find(targetClass); // 最后进行切换的dom
let brothertarget = p.find(bind_borther).eq(bind_index).find(targetClass); // 最后进行切换的联动brother元素
// 动画切换模式
let isAnitoggle = that.closest(bind_parent).is(animation_type); //slideup slidedown切换
let ani_target_list = p.find(bind_son).find(animation_dom);
let ani_brothertarget_list = p.find(bind_borther).find(animation_dom);
let ani_target_me = that.closest(bind_son).find(animation_dom);
let ani_brothertarget_me = p.find(bind_borther).eq(bind_index).find(animation_dom);
// also添加的一个元素
let also = p.find(bind_son).find(alsoadd);
let brother_also = p.find(bind_borther).find(alsoadd);
let also_target = that.closest(bind_borther).find(alsoadd); // 最后一起添加行为类名的元素 dom
let brother_also_target = p.find(bind_borther).eq(bind_index).find(alsoadd); // 最后brother元素一起添加行为类名的dom
let w = $(window).width();
if (w < 1024) {
if (ismobile) return
}
// 最后切换的元素dom
if (target.length == 0) { // hoveradd类名不存在 则重新赋值target和son
target = p.find(bind_son).eq(bind_index);
son = p.find(bind_son);
}
// 最后联动切换的元素dom
if (brothertarget.length == 0) { // hoveradd类名不存在 则重新赋值
brothertarget = p.find(bind_borther).eq(bind_index)
brother = p.find(bind_borther);
}
let isadd = target.is(`.${addClass}`);
// console.log('当前',target,bind_index)
if (isadd) { // 已经有了行为类名
} else { // 还没有行为类名
// console.log('我还没有',bind_index)
son.removeClass(addClass);
if (save) {
target.addClass(addClass);
} else {
target.toggleClass(addClass);
}
if (also.length > 0) {
also.removeClass(addClass);
if (save) {
also_target.addClass(addClass);
} else {
also_target.toggleClass(addClass);
}
}
if (isAnitoggle) {
ani_target_list.removeClass(addClass).stop().slideUp()
if (save) {
ani_target_me.addClass(addClass).stop().slideDown();
} else {
ani_target_me.toggleClass(addClass).stop().slideToggle();
}
}
}
if (brother.length > 0) {
if (isadd) {
if (save) {
// console.log(232)
} else {
brother.removeClass(addClass);
if (brother_also.length > 0) {
brother_also.removeClass(addClass);
}
if (isAnitoggle) {
ani_brothertarget_list.removeClass(addClass).stop().slideUp()
}
}
} else {
brother.removeClass(addClass);
if (save) {
brothertarget.addClass(addClass);
} else {
brothertarget.toggleClass(addClass);
}
if (brother_also.length > 0) {
brother_also.removeClass(addClass);
if (save) {
brother_also_target.addClass(addClass);
} else {
brother_also_target.toggleClass(addClass);
}
}
if (isAnitoggle) {
ani_brothertarget_list.removeClass(addClass).stop().slideUp()
if (save) {
ani_brothertarget_me.addClass(addClass).stop().slideDown();
} else {
ani_brothertarget_me.toggleClass(addClass).stop().slideToggle();
}
}
}
}
// 如果是点击事件 并且切换类型是动画 slideUp和slideDown
if (evenType == 'click' && isAnitoggle) {
// 点击页面重置对应的slideUp
$(document).off("click").on("click", function (e) {
let Doctarget = $(e.target);
let hasadd = son.is(`.${addClass}`);
if (Doctarget.closest(bind_son).length == 0) {
// console.log(Doctarget.closest(bind_son).length,'DoctargetDoctarget')
// console.log(hasadd,'hasadd')
if (hasadd) {
if (save) {} else {
// li.removeClass('active').find('.togglebox').stop().slideUp();
// li.find('.alosadd').removeClass('active');
son.removeClass(addClass);
if (also.length > 0) {
also.removeClass(addClass);
}
ani_target_list.removeClass(addClass).stop().slideUp()
if (brother.length > 0) {
brother.removeClass(addClass);
if (brother_also.length > 0) {
brother_also.removeClass(addClass);
}
ani_brothertarget_list.removeClass(addClass).stop().slideUp()
}
}
}
};
e.stopPropagation();
})
}
}
4.页面滚动某个距离给标签添加类名
// 鼠标往下滚动时添加类名 往上时去除类名
function scrollHeaderInit(e) {
let {
bind_list, //符合条件后需要添加类名的DOM元素集合
break_handle, // 如果返回true 则不执行后面的逻辑
append_handle, // 追加函数处理 执行其他自定义操作
up_classname, // 上滑时添加的类名
down_classname, // 上滚时添加的类名
scrolling_classname, // 滚动中添加的类名
init_num, // 大于这个值开始执行滚动事件的处理逻辑
} = e;
let scroll_start = 0,
scroll_end = 0,
scroll_can = true,
scroll_task = null;
// debugger
$(window).scroll(function () {
// clearTimeout(scroll_task);
// scroll_task = setTimeout(function () {
// scroll_can = true;
// }, 50);
// if (!scroll_can) return
// scroll_can = false;
// console.log({
// scroll_start,
// scroll_end,
// init_num
// })
if (break_handle && break_handle()) return
if (scroll_end < init_num) {
for (let index = 0; index < bind_list.length; index++) {
let addTarget = bind_list[index];
$(addTarget).removeClass(scrolling_classname);
$(addTarget).removeClass(down_classname);
$(addTarget).removeClass(up_classname);
}
} else {
if (scroll_end >= scroll_start) {
// 往下滚
scroll_start = scroll_end;
for (let index = 0; index < bind_list.length; index++) {
let backdata = {
'type': 'down'
};
let addTarget = bind_list[index];
$(addTarget).addClass(scrolling_classname);
$(addTarget).addClass(down_classname);
$(addTarget).removeClass(up_classname);
append_handle && append_handle(backdata);
}
} else {
// 往上滑
scroll_start = scroll_end;
for (let index = 0; index < bind_list.length; index++) {
let backdata = {
'type': 'up'
};
let addTarget = bind_list[index];
$(addTarget).addClass(scrolling_classname);
$(addTarget).addClass(up_classname);
$(addTarget).removeClass(down_classname);
append_handle && append_handle(backdata);
}
}
}
// if (scroll_start > scroll_end && scroll_end > 300) {
// $($classname).addClass(down_classname);
// } else {
// $($classname).removeClass(down_classname);
// }
});
}
// bind_list, //符合条件后需要添加类名的DOM元素集合
// break_handle, // 如果返回true 则不执行后面的逻辑
// up_classname, // 上滑时添加的类名
// down_classname, // 上滚时添加的类名
// scrolling_classname, // 滚动中添加的类名
// init_num, // 大于这个值开始执行滚动事件的处理逻辑
// 导航条在鼠标滚动事件
scrollHeaderInit({
bind_list: ['.nav-header'],
up_classname: 'isup',
down_classname: 'isdown',
scrolling_classname: 'isscrolling',
init_num: 1,
break_handle: function () {
let break_flag = $('.nav-hader-content').is('.isshowmap');
// console.log(break_flag, 'break_flag')
return break_flag
// return false
}
})
5.监听鼠标滚轮 滚动事件(需要引入jquery.mousewheel.min.js)
// ele 获取滚轮的条件行程值
// judgeHandle 滑轮滑动调函数
// handle 执行完成回调函数
// backMouse({
// ele: $(pageitem[nowIndex]),
// judgeHandle: function(e) {
// let {
// i,
// max,
// type
// } = e;
// $(movebox).css('transform',
// `translateY(-${(myh / howmove) * i}px)`)
// libox.eq(Math.floor(i / howmove)).addClass('active').siblings()
// .removeClass('active');
// // console.log(max / (i * howmove))
// // console.log(max % i)
// },
// handle: function(e) {
// // console.log('yunxu')
// let {
// type
// } = e;
// pagefull.mousewheel.enable();
// if (type == 'up') {
// pagefull.slidePrev();
// } else {
// pagefull.slideNext();
// }
// }
// });
var mouseTask = null;
// mac的鼠标会滚动很大 通过定时器修改canChange实现防抖
var canChange = true;
function backMouse(e) {
let {
judgeHandle,
handle,
ele
} = e;
console.log(ele)
// $('.mouseEvent').each(function(i, ele) {
let sT = $(window).scrollTop(),
metop = ele.offset().top,
nowmouse = ele.attr('data-nowmouse'),
endmouse = ele.attr('data-endmouse'); //需要滚动多少次鼠标才执行结束函数
let meCall = Boolean(Number(ele.attr('isbackMouse'))) || false; // 手动调用
let readyGo;
if (meCall) {
readyGo = meCall;
} else if (sT > metop) {
readyGo = true;
}
if (readyGo) {
let i = nowmouse;
let max = endmouse; //最大滑动次数
// let len = 4;
$(window).unbind('mousewheel');
$(window).mousewheel(function (even) {
if (!canChange) {
return
} else {
setTimeout(() => {
canChange = true;
}, 30);
}
if (even.deltaY < 0) { // 往下滚动
if (i == max) {
canChange = true;
handle({
type: 'down'
});
$(window).unbind('mousewheel');
ele.attr('data-nowmouse', i);
} else {
if (mouseTask) {
clearTimeout(mouseTask);
mouseTask = null;
}
mouseTask = setTimeout(() => {
i++;
canChange = false;
ele.attr('data-nowmouse', i);
judgeHandle({
i,
max,
type: 'down'
})
}, 20);
}
console.log(i, '下')
} else { // 往上滚动
if (i == 0) {
canChange = true;
handle({
type: 'up'
});
$(window).unbind('mousewheel');
ele.attr('data-nowmouse', i);
} else {
if (mouseTask) {
clearTimeout(mouseTask);
mouseTask = null;
}
mouseTask = setTimeout(() => {
i--
canChange = false;
ele.attr('data-nowmouse', i);
judgeHandle({
i,
max,
type: 'up'
})
}, 20);
}
console.log(i, '上')
}
});
}
// })
}
6.swiper-点击按钮实现开启或者停止自动轮播
// swiper初始化
// init: function() {
// pause_event({
// swiper: this,
// eventClass: '.green-thumbs .com-pause'
// });
// this.emit('slideChangeTransitionStart');
// },
// 点击swiper暂停按钮
function pause_event(e) {
let {
eventClass,
swiper
} = e;
if ($(eventClass).length == 0) return
$(eventClass).on('click', function () {
if (swiper.autoplay.running) {
swiper.autoplay.stop();
$(this).addClass('canplay');
} else {
swiper.autoplay.start();
$(this).removeClass('canplay');
}
})
}
7.swiper 设置进度条
// html标签部分
// pagination: {
// el: ".swiper-pagination-green",
// type: "custom",
// renderCustom: function(swiper, current, total) {
// let n = current < 9 ? `0${current}` : current;
// let t = total < 9 ? `0${total}` : total;
// return `
// <span class="now-num fz14 color1 fw700" data-num="${current}">${n}</span>
// <span class="total-num fz14 color24 fw700" data-total="${total}">${t}</span>`
// }
// },
// js部分
// slideChangeTransitionStart: function() {
// getNumSwiper({
// swiper: this,
// numbox: '.green-thumbs .com-num',
// pressbox: '.green-thumbs .com-progress .proess'
// });
// },
function getNumSwiper(e) {
let {
swiperClass,
swiper,
numbox,
pressbox
} = e;
let n = $(numbox).find('.now-num').attr('data-num');
// let n = swiper.activeIndex + 1;
let t = $(numbox).find('.total-num').attr('data-total');
let p = '100%';
// console.log(n, t);
if (t > 0) {
p = n / t * 100 + '%'
}
$(pressbox).css('width', p)
// console.log(numbox);
// console.log(pressbox);
// console.log(swiper.progress, "进度");
// console.log(swiper.slides.length);
// console.log(swiper.activeIndex, "当前index");
// console.log($(swiper.$el).find('.swiper-slide'), "$el");
// console.log(swiper.width, "width");
// console.log(swiper.isEnd);
// console.log($(swiperClass).length);
}
8.获取数据类型
function gettype(o) {
let result = Object.prototype.toString.call(o).slice(8, -1);
if (result === 'Null') {
return null
} else if (result === 'Undefined') {
return undefined;
} else {
return result;
}
}
9.数据判空
// 数据类型判空
function objJudge(arg) {
let result = Object.prototype.toString.call(arg).slice(8, -1);
switch (result) {
case 'Undefined':
return false
break;
case 'Null':
return false
break;
case 'Object':
return JSON.stringify(arg) !== '{}'
break;
case 'Array':
return arg.length !== 0
break;
case 'String':
return arg !== '';
break;
case 'Number':
return true
break;
case 'Boolean':
return arg
break;
}
}
11.遍历数据返回以及遍历数据查找对应数据
let post_data_init = {
myinit: function (e) {
let {
obj,
current_name,
end_value,
total_name,
data,
isend,
islooping
} = e;
if (isend) {
data[`${total_name}`] = end_value
// console.log({
// current_name,
// end_value,
// data,
// total_name,
// data,
// isend
// });
} else {
if (islooping) total_name += current_name;
// console.log(current_name, 'myname')
// if (current_name == '[myname2]') {
// }
let obj_type = Object.prototype.toString.call(obj).slice(8, -1);
switch (obj_type) {
case 'Undefined':
this.myinit({
current_name,
end_value: obj,
total_name,
data,
isend: true
})
break;
case 'Null':
this.myinit({
current_name,
end_value: obj,
total_name,
data,
isend: true
})
break;
case 'String':
this.myinit({
current_name,
end_value: obj,
total_name,
data,
isend: true
})
break;
case 'Number':
this.myinit({
current_name,
end_value: obj,
total_name,
data,
isend: true
})
break;
case 'Boolean':
this.myinit({
current_name,
end_value: obj,
total_name,
data,
isend: true
})
break;
case 'Array':
for (let i = 0; i < obj.length; i++) {
this.myinit({
obj: obj[i],
current_name: `[${i}]`,
end_value,
total_name,
data,
isend,
islooping: true
})
}
break;
case 'Object':
for (let k in obj) {
this.myinit({
obj: obj[k],
current_name: `[${k}]`,
end_value,
total_name,
data,
isend,
islooping: true
})
}
break;
}
}
return data
},
find_to_handle: function (e) {
let {
obj,
attr_name,
handle
} = e;
if (!handle(e)) {
if (gettype(obj) == 'Array') {
for (let i = 0; i < obj.length; i++) {
this.find_to_handle({
obj: obj[i],
handle
});
}
} else if (gettype(obj) == 'Object') {
for (let k in obj) {
// console.log(obj[k], 'obj[k]')
this.find_to_handle({
obj: obj[k],
attr_name: k,
handle
});
}
}
}
}
}
let test_obj = {
"key1": "abc", // 字符串类型
"key2": 1234, // Number
"key3": [1234, "21341", "53"], // 数组
"key4": { // json 类型
"key4_1": 12,
"key4_2": "kkk",
"key4_3": { // json 类型
"key4_1": 12,
"key4_2_qwe": ["kkk"]
}
}
}
let newData = post_data_init.myinit({
obj: test_obj,
data: {},
total_name: 'content',
isend: false,
islooping: false
})
console.log(newData)
{
"content[key1]": "abc",
"content[key2]": 1234,
"content[key3][0]": 1234,
"content[key3][1]": "21341",
"content[key3][2]": "53",
"content[key4][key4_1]": 12,
"content[key4][key4_2]": "kkk",
"content[key4][key4_3][key4_1]": 12,
"content[key4][key4_3][key4_2_qwe][0]": "kkk"
}
let newobj = [];
let newData2 = post_data_init.find_to_handle({
obj: test_obj,
handle: function (e) {
let {
obj,
attr_name,
handle
} = e;
if (gettype(obj) && gettype(obj.key4_2_qwe)) {
//
newobj.push(obj.key4_2_qwe)
} else {
return false
}
}
})
console.log(JSON.stringify(newobj))
[["kkk"]]
12.把相同楼名归类后,下属楼层放入一个list中
var dataarr = [{
"test_id": "420",
"test_building": "C栋",
"test_floor_text": "1层",
}, {
"test_id": "420",
"test_building": "B栋",
"test_floor_text": "1层",
}, {
"test_id": "420",
"test_building": "a栋",
"test_floor_text": "1层",
}, {
"test_id": "420",
"test_building": "14栋",
"test_floor_text": "1层",
}, {
"test_id": "252",
"test_building": "7",
"test_floor_text": "5",
}, {
"test_id": "251",
"test_building": "17栋",
"test_floor_text": "6",
}, {
"test_id": "420",
"test_building": "X栋",
"test_floor_text": "1层",
}, {
"test_id": "250",
"test_building": "7栋",
"test_floor_text": "5",
}, {
"test_id": "223",
"test_building": "2栋",
"test_floor_text": "6楼",
}, {
"test_id": "205",
"test_building": "9栋",
"test_floor_text": "1楼",
}, {
"test_id": "204",
"test_building": "8栋",
"test_floor_text": "1楼",
}, {
"test_id": "203",
"test_building": "8栋",
"test_floor_text": "3楼",
}, {
"test_id": "150",
"test_building": "2栋",
"test_floor_text": "3楼",
}, {
"test_id": "149",
"test_building": "2栋",
"test_floor_text": "5楼",
}, {
"test_id": "148",
"test_building": "2栋",
"test_floor_text": "5楼及6楼",
}, {
"test_id": "147",
"test_building": "4栋",
"test_floor_text": "1栋",
}, {
"test_id": "146",
"test_building": "2栋",
"test_floor_text": "2楼",
}, {
"test_id": "145",
"test_building": "5栋",
"test_floor_text": "1楼",
}, {
"test_id": "144",
"test_building": "1栋",
"test_floor_text": "2楼",
}, {
"test_id": "143",
"test_building": "2栋",
"test_floor_text": "4楼",
}, {
"test_id": "142",
"test_building": "4栋",
"test_floor_text": "1楼",
}, {
"test_id": "141",
"test_building": "1栋",
"test_floor_text": "1楼",
}, {
"test_id": "140",
"test_building": "3栋",
"test_floor_text": "4楼",
}, {
"test_id": "139",
"test_building": "3栋",
"test_floor_text": "2楼",
}, {
"test_id": "138",
"test_building": "7栋",
"test_floor_text": "5楼",
}, {
"test_id": "137",
"test_building": "3栋",
"test_floor_text": "5楼",
}, {
"test_id": "136",
"test_building": "2栋",
"test_floor_text": "7楼",
}, {
"test_id": "135",
"test_building": "7栋",
"test_floor_text": "3楼",
}, {
"test_id": "134",
"test_building": "2栋",
"test_floor_text": "1楼",
}, {
"test_id": "133",
"test_building": "5栋",
"test_floor_text": "2楼",
}, {
"test_id": "132",
"test_building": "7栋",
"test_floor_text": "4楼",
}, {
"test_id": "131",
"test_building": "3栋",
"test_floor_text": "3楼",
}, {
"test_id": "130",
"test_building": "7栋",
"test_floor_text": "2楼",
}, {
"test_id": "129",
"test_building": "3栋",
"test_floor_text": "1楼",
}];
/*
checkPush 检查重复项
{
7楼:{index :0 },
4楼:{index :12},
}
pre => []; 空数组为默认值,最后输出的数组
next => 每一项
let o = {
test_building: 7楼,
mylist:[]
};
i++; 记录pre数组的索引
*/
function findKeyAndPushList(e) {
let {
arr,
findkey,
pushkey,
listname
} = e;
let checkPush = {};
let i = 0;
return arr = arr.reduce((pre, next) => {
let k = next[findkey];
if (!checkPush[k]) {
checkPush[k] = {
index: i
};
let o = {};
o[findkey] = k;
o[listname] = [];
pre.push(o)
i++;
}
pre[checkPush[k].index][listname].push(next);
// [checkPush[k].index] => 在checkPush对象中找到对应的 findkey后获取他的 index value 索引
// pre[索引][listname] => pre[索引].mylist push当前项 next进入下级数组
return pre;
}, []);
}
let backarr = findKeyAndPushList({
arr: dataarr,
findkey: 'test_building',
pushkey: 'test_floor_text',
listname: 'mylist',
}).sort((a, b) => {
// 如果字母开头则按字母正序
if (isNaN(parseInt(a.test_building)) && isNaN(parseInt(b.test_building))) {
let x = a.test_building.slice(0, 1).toUpperCase()
let y = b.test_building.slice(0, 1).toUpperCase()
return x < y ? -1 : x > y ? 1 : 0;
} else {
// 字母统一在数字前面
// 数字按正序
let x = isNaN(parseInt(a.test_building)) ? 0 : parseInt(a.test_building);
let y = isNaN(parseInt(b.test_building)) ? 0 : parseInt(b.test_building);
return x - y;
}
})
backarr.forEach(ele => {
if (ele.mylist.length > 1) {
ele.mylist.sort((c, d) => {
// 数字按正序
let xx = isNaN(parseInt(c.test_floor_text)) ? 0 : parseInt(c.test_floor_text);
let yy = isNaN(parseInt(d.test_floor_text)) ? 0 : parseInt(d.test_floor_text)
return xx - yy;
})
}
})
13.获取文本是否超出了行高
// 获取文本是否超出了行高
function getRow(e) {
let {
p,
li,
addName,
addtarget,
limit
} = e;
let list = $(p).find(li);
// console.log(list);
list.each(function (i, ele) {
// let fs = $(this).css('font-size');
let lh = parseFloat($(this).css('line-height'));
let myh = $(this).height();
let finalh = lh * limit; // 最高多高
let row = Math.round(myh / parseFloat(lh)); // 现在几行
// let top = $(this).scrollTop(); // 现在几行
if (myh >= finalh) {
// console.log($(p).find(addtarget).eq(i));
// $(p).find(addtarget).eq(i).addClass(addName);
$(this).closest(addtarget).addClass(addName);
// debugger
} else {
// $(p).find(addtarget).addClass('bugou');
}
console.log({
lh,
myh,
finalh,
i,
top
})
// debugger
});
};
if ($('#mcoty').length > 0) {
getRow({
p: '#mcoty',
li: '.swiper-slide .desc',
limit: 5,
addName: 'isoverflow',
addtarget: '.seemore-p',
})
}
13.页面滚动时,判断某个元素开始漏出
var scrollFlag = true;
// var windoShow = 0.7;
// var videoShow = 0.6;
function scroll_judge_element(e) {
let {
windoShow,
videoShow,
judge_suc,
judge_fail
} = e;
if (!scrollFlag) return
scrollFlag = false;
let Wtop = $(window).scrollTop();
let WH = $(window).height();
let element = $(".judge_element");
let my_top = element.offset().top;
let my_height = element.height();
if (my_height >= WH) {
// 如果滚动距离小于 元素距离顶部的距离再加上自身的高度 -----比如视野看到元素 videoShow 漏出了 0.7 或者 1全部漏出
// 如果滚动距离大于 元素距离顶部的距离再加上 窗口的高度 -----即看到元素隐藏了 windoShow 窗口多少就暂停播放
var readyPlay = Wtop < my_top + (my_height * videoShow) && Wtop > my_top - (WH * windoShow) ? true : false;
// console.log({
// "滚动距离": Wtop,
// '我离顶部距离': my_top,
// '条件': my_top + WH + my_height,
// })
} else {
// 要看到元素videoShow 部分 并且 没有开始隐藏元素videoShow部分 才播放
// var readyPlay = Wtop + (WH * windoShow) > my_top && Wtop + WH < my_top + my_height ? true : false;
var readyPlay = Wtop + WH > my_top + (my_height * videoShow) && Wtop < my_top + (my_height * videoShow) ? true : false;
// console.log({
// "滚动距离": Wtop,
// '我离顶部距离': my_top,
// '条件': my_top + (my_height * videoShow),
// '条件2': my_top - (my_height * videoShow),
// })
}
if (readyPlay) {
judge_suc && judge_suc(element);
} else {
judge_fail && judge_fail(element);
}
scrollFlag = true;
}
scroll_judge_element({
judge_suc: function (data) {
console.log(data, 'suc');
},
judge_fail: function (data) {
console.log(data, 'fail');
}
})
$(window).scroll(function () {
scroll_judge_element({
windoShow: 0.5,
videoShow: 0.5,
judge_suc: function (data) {
// console.log(data, 'suc');
console.log('suc');
},
judge_fail: function (data) {
console.log('fail');
}
})
});