老师,抱错了,找不到原因

//index.html

<!DOCTYPE html>

<html>

<head>

<title>项目：ES6实现图片切换特效</title>

</head>

<body>

<!-- <div class="_Img_container">

</ul>

<figcaption>title</figcaption>

</figure>

</div>

</div> -->

</div>

<!-- <div class="_Img_overlay">

</div> -->

const img = new $Img({

data,

initType: 'JavaScript',

parasitifer: '#wrap'

})

</script>

</body>

</html>

//index.js

(function(window,document){

//公共方法

const methods = {

//剩余参数...children把children转成一个数组

appendChild(parent, ...children){

children.forEach(el => {

parent.appendChild(el)

})

$(selector, root = document){

return root.querySelector(selector);

$$(selector, root = document){

return root.querySelectorAll(selector);

}

//构造函数Img的配置项options

//构造函数的this指向的是实例化对象

let Img = function(options){

//初始化一些变量以及对图片进行分类

this._init(options);

//生成dom元素

this._createElement();

//绑定事件

this._bind();

//显示到页面上

this._show();

};

Img.prototype._init = function({data, initType, parasitifer}){

this.types = ['全部']; //所有的分类

this.all = []; //所有图片元素

this.classified = {'全部': []}; //按照类型分类后的图片

this.curType = initType; //当前显示的图片分类

this.parasitifer = methods.$(parasitifer); //挂载点

this.imgContainer = null; //所有图片的容器

this.wrap = null; //整体容器

this.typeBtnEles = null; //所有分类按钮组成的数组

this.figures = null; //所有当前显示的图片组成的数组

this._classify(data); //图片的分类

};

Img.prototype._classify = function(data){

let srcs = []; //已经添加到分类中的图片的src数组

data.forEach(({title, type, src, alt}) => {

if(!this.types.includes(type)){

this.types.push(type);

};

if(!Object.keys(this.classified).includes(type)){

this.classified[type] = [];

};

if(!srcs.includes(src)){

//图片没有生成过

//生成图片

//添加到对应的分类中

srcs.push(src);

let figure = document.createElement('figure');

let img = document.createElement('img');

let figcaption = document.createElement('figcaption');

img.src = src;

img.setAttribute('alt', alt);

figcaption.innerText = title;

methods.appendChild(figure, img, figcaption);

this.all.push(figure);

this.classified[type].push(this.all.length - 1);

}else{

//去all中找到对应的图片

//添加到对应的分类中

this.classified[type].push(srcs.findIndex(s1 => s1 === src));

}

})

};

//根据分类获取图片

Img.prototype._getImgsByType = function(type){

return type === '全部' ? [...this.all] : this.classified[type].map(index => this.all[index]);

};

//生成DOM

Img.prototype._createElement = function(){

let typesBtn = [];//创建分类按钮

for (let type of this.types.values()){

typesBtn.push(`<li class="_Img_classify_type-btn${type === this.curType ? ' _Img_type-btn-active' : ''}">${type}</li>`)

};

console.log(typesBtn);

//整体的模板

let template = `

${typesBtn.join('')}

</ul>

let wrap = document.createElement('div');

wrap.className = '_Img_container';

wrap.innerHTML = template;

this.imgContainer = methods.$('_Img_img-container', wrap);

methods.appendChild(this.imgContainer, ...this._getImgsByType(this.curType));

this.wrap = wrap;

this.typeBtnEles = methods.$$('._Img_classify_type-btn', wrap);

this.figures = methods.$$('figure',wrap);

//遮罩层

let overlay = document.createElement('div');

overlay.className = '_Img_overlay';

overlay.innerHTML = `

methods.appendChild(this.wrap, overlay);

this.overlay = overlay;

this.previewImg = methods.$('img', overlay);

};

Img.prototype._bind = function(){

};

Img.prototype._show = function(){

};

window.$Img = Img;

})(window, document);

慕盖茨9092533 2019-12-22

源自：项目：ES6实现图片切换特效 2-10 createElement方法实现（2）

收起

2回答

卡布琦诺回答被采纳获得+3积分 2019-12-23 17:07:46

同学你好，上条回答中，圈出来的位置是老师在调试的过程中做了调整的地方以及同学代码写错的地方，老师没有标注清楚，是老师的问题（反省中~）。关于粘贴的代码有双引号的问题，可能是老师将同学的代码粘贴到编辑器里引号丢失了，也希望同学下次粘贴代码的时候可以选择一下格式，就可以避免这种情况出现啦，同学的代码问题是如下语句缺了一个点，导致元素找不到而报错。

如果我的回答帮助了你，希望采纳，祝学习愉快！

收起回答

卡布琦诺 2019-12-22 18:36:34

同学你好，代码错误如下：

如果我的回答帮助了你，希望采纳，祝学习愉快！

收起回答

提问者慕盖茨9092533 #1

老师,你划了红线,我除了_和__的看明白了,其他都不明白,还多了些疑问,比如第一个红线,我粘贴的全部两个字有引号,视频中也有,不知道为何划红线，再如生成变量名，只要上下文对应就可以，而且template是模板的英语含义，为什么老师给我用红线划上了，不太理解，还有data.forEach()里的参数也给划了，不太明白，希望老师除了单斜杠和双斜杠的问题，都可以给我一点文字注释，多谢

2019-12-23 15:34:08