利用 JS 构造函数思想，同时设置多个页面元素的动态效果

JS 构造函数思想在DOM上的应用

对于页面中某些重复元素要设置相同或类似的动态属性，为了尽量减少代码重复，我们可以利用JS面向对象的构造函数思想来封装组件。

举例：

页面中两个盒子，一个盒子通过鼠标点击，可以切换显示的内容。另一个盒子自动切换显示的内容。

分析：

两个盒子的共同点：

1. 盒子的布局完全相同，子节点相同
2. 切换显示内容的动态事件相同

两个盒子的不同点：

​ 触发事件的方式不同，一个是点击事件，一个是自动触发(页面加载)

思路：

我们通过一个构造函数，以盒子的id为参数，构造出一个实例对象，这个对象可以调用构造函数上的方法来实现动态事件。

在构造函数中，我们把两个盒子的共同的属性放到构造函数的属性里，将点击事件和自动触发事件分别作为两个方法，放到构造函数的原型 prototype 上。

实现代码：

HTML 部分：

<div id="div1">
    <p style="background-color: pink">点击切换p>
    <button class="on">1button>
    <button>2button>
    <button>3button>
    <div style="display: block">哈哈哈哈哈div>
    <div>嘻嘻嘻嘻嘻div>
    <div>嘿嘿嘿嘿嘿div>
div>

<div id="div2">
    <p style="background-color: pink">自动切换p>
    <button class="on">1button>
    <button>2button>
    <button>3button>
    <div style="display: block">哈哈哈哈哈div>
    <div>嘻嘻嘻嘻嘻div>
    <div>嘿嘿嘿嘿嘿div>
div>

CSS 部分：

JS 部分：

 function Change(id) {
     
        this.box = document.querySelector(id); 
        this.btns = this.box.querySelectorAll('button');
        this.divs = this.box.querySelectorAll('div');
        this.num = 0;
     // 改变按钮样式和下面的显示内容，是通用方法，放在属性里
        this.itemChange = (index)=> {
     
            this.divs.forEach((item)=>{
     
                item.style.display = 'none';
            });
            this.divs[index].style.display = 'block';

            this.btns.forEach((item) => {
     
                item.classList.remove('on');
            });
            this.btns[index].classList.add('on');
        };
    }
	//点击改变
    Change.prototype.go = function () {
     
        this.btns.forEach((item,index) => {
     
            item.onclick = () =>{
     
                this.itemChange(index)
            }
        });
    };
	// 自动改变，用定时器实现
    Change.prototype.autogo = function(){
     
        setInterval(()=>{
     
            this.num ++;
            if (this.num > this.btns.length - 1){
     this.num = 0}
            this.itemChange(this.num);
        }, 500)
    };

	// 生成盒子1的实例，调用相应动态方法
    let box1 = new Change('#div1');
    box1.go();

	// 生成盒子2的实例，调用相应动态方法
    let box2 = new Change('#div2');
    box2.autogo();