all files / src/ class.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
 
 
 
 
 
 
 
 
 
4×
8×
 
4×
 
 
 
 
 
 
 
 
2×
4×
 
2×
 
 
 
 
 
 
 
 
2×
6×
3×
 
3×
 
 
2×
 
 
 
 
 
 
 
 
16×
 
 
 
 
 
 
 
16×
16×
26×
10×
 
 
16×
 
 
 
 
 
 
 
 
24×
 
 
 
 
 
 
 
11×
9×
 
 
 
 
 
 
 
 
7×
5×
10×
5×
 
 
/**
 * 类操作
 */
 
/**
 * 添加类
 * @param {string} 类名
 * @return {$} 本身实例 实现链式调用
 */
export function addClass (className) {
  this.map(elem => {
    elemAddClass(elem, className)
  })
  return this
}
 
/**
 * 删除类
 * @param {string} 类名
 * @return {$} 本身实例 实现链式调用
 */
export function removeClass (className) {
  this.map(elem => {
    elemRemoveClass(elem, className)
  })
  return this
}
 
/**
 * 切换类
 * @param {string} 类名
 * @return {$} 本身实例 实现链式调用
 */
export function toggleClass (className) {
  this.map(elem => {
    if (isElemHasClass(elem, className)) {
      elemRemoveClass(elem, className)
    } else {
      elemAddClass(elem, className)
    }
  })
  return this
}
 
/**
 * 判断 DOM 中是否存在类名
 * @param {string} className 类名
 * @return {boolean}
 */
export function hasClass (className) {
  return isElemsHasClass(this, className)
}
/**
 * 判断当前节点集合中是否含有该类
 * @param {$} context 实例
 * @param {string} className 类名
 */
function isElemsHasClass (context, className) {
  let result = false
  context.map(elem => {
    if (elem.className.split(' ').includes(className)) {
      result = true
    }
  })
  return result
}
/**
 * 判断某个节点是否有该类名
 * @param {HTMLElement} elem 节点
 * @param {string} className 类名
 * @return {boolean}
 */
function isElemHasClass (elem, className) {
  return elem.className.split(' ').includes(className)
}
/**
 * 单个节点 添加类名
 * @param {HTMLElement} elem 节点
 * @param {string} className 类名
 */
function elemAddClass (elem, className) {
  if (!isElemHasClass(elem, className)) {
    elem.className = elem.className + ' ' + className
  }
}
/**
 * 单个节点 删除类名
 * @param {HTMLElement} elem 节点
 * @param {string} className 类名
 */
function elemRemoveClass (elem, className) {
  if (isElemHasClass(elem, className)) {
    const currentClassNameArr = elem.className.split(' ')
    const filterClassNameArr = currentClassNameArr.filter(scopedClassName => scopedClassName !== className)
    elem.className = filterClassNameArr.join(' ')
  }
}