为什么选取不到ul

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="wrap">
    <div>
      <div class="title">自定义select</div>
     <!--  <select id="demo">
        <option value="1" type="构建工具">Babel</option>
        <option value="2" type="构建工具">Webpack</option>
        <option value="3" type="构建工具">Rollup</option>
        <option value="4" type="前端框架">Vue</option>
        <option value="5" type="前端框架">Angular</option>
        <option value="6" type="前端框架">React</option>
        <option value="7" type="前端框架">Nerv</option>
      </select> -->
      <div class='selector'>
        <div class='selector-main'>
          <input type='text' class="selector-content"></input>
        <div class="arow-btn">▼</div>
        </div>
        
        <div class="selector-item">
          <input type="text" class='search-bar' placeholder="搜索">
          <div class="search-list"></div>
        </div>
      </div>
    </div>
    <div>
      <p id="out"></p>
    </div>
    <!-- <ul>
      <div>title</div>
      <li>1</li>
      <li>2</li>
      <div>tittle</div>
      <li>3</li>
    </ul> -->

  
    <div style="text-align: center;margin-top: 100px;">
      <div class="title">原生select</div>
      <select>
        <option value="1" type="构建工具">Babel</option>
        <option value="2" type="构建工具">Webpack</option>
        <option value="3" type="构建工具">Rollup</option>
        <option value="4" type="前端框架">Vue</option>
        <option value="5" type="前端框架">Angular</option>
        <option value="6" type="前端框架">React</option>
        <option value="7" type="前端框架">Nerv</option>
      </select>
    </div>
  </div>
  <script type="text/javascript"src='js/index.js'></script>
  <script type="text/javascript"src='js/data.js'></script>
  <script>
    const selector=new $selector({
      data,
      parasitifer:'.search-list'
    })
  </script>
</body>
</html>

*{
	padding:0;
	margin:0;
	list-style: none;
}
body{
	background-color: #ddd;
}
#wrap{
	margin-top:300px;
}
.title{
	color:lightblue;
	font-weight: bold;
	font-size:16px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
}
.selector-main{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
}
.selector{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	position: relative;
}
.selector-item{
	width:194px;
	opacity: 0;
	background-color: #fff;
	overflow: auto;
	max-height: 200px;
	transition: all .3s;
	position: absolute;
	top:21px;
}
.arow-btn{
	color:white;
	width:21px;
	height:21px;
	background-color: lightblue;
	text-align: center;
	cursor: pointer;
}
.selector-title{
	font-weight: bold;
	font-size:20px;
}
li{
	padding: 5px 0 5px 10px;
}
li:hover{
	background-color: #ddd;
}

(function(window,document){
	const co={
		appendChild(parent,...element){
			element.forEach(el=>{
				parent.appendChild(el);
			});
		},
		$(element,root=document){
			return root.querySelector(element);
		},
		$$(element,root=document){
			return root.querySelectorAll(element);
		},
	}

	let Selector=function(options){
		this._init(options);
		this._bind();
		this._list();
		this._content();
		
	}
	Selector.prototype._init=function({data,parasitifer}){
		this.parasitifer=co.$(parasitifer);//挂载
		this.type=['构建工具','前端框架'];//所有的分类
		this.classified={'构建工具':[],'前端框架':[]};//分类好的数据
		this.classify(data);
		this.shown=false;
		console.log(this.classified);
	}
	//分类
	Selector.prototype.classify=function(data){
		data.forEach(({type,value,number})=>{
			if(this.type.includes(type)){
				this.classified[type].push(value);
			}
		})
	}
	//生成下拉列表
	Selector.prototype._list=function(){
		let ul=document.createElement('ul');
		let ulContent='';
		for(let i in this.classified){
			let div=`<div class='selector-title'>${i}</div>`;
			let li='';
			for(let k in this.classified[i]){
				li+=`<li>${this.classified[i][k]}</li>`
			}
			ulContent+=div+li;
		}
		ul.innerHTML=ulContent;
		co.appendChild(co.$('.search-list'),ul);
	}
	Selector.prototype.show=function(ele){
		if(!this.shown){
			ele.style.opacity=1;
			setTimeout(()=>{
				ele.style.display='block'
				this.shown=true;
			},300);			
		}else{
			ele.style.opacity=0;
			setTimeout(()=>{
				ele.style.display='none'
				this.shown=false;
			},300);	
		}
	}
	Selector.prototype._bind=function(){
		let arrow=co.$('.arow-btn');
		let item=co.$('.selector-item');
		//点击箭头收放下拉列表
		arrow.addEventListener('click',(e)=>{
			e.stopPropagation();
			if(!this.shown){
				this.show(item);
			}else{
				this.show(item);
			}
			
		});
		// 点击其他区域收起列表
		document.addEventListener('click',()=>{
			if(this.shown){
				this.show(item);
			}
		})
		// 点击列表项
		let list=co.$('.search-list');
		let ul=co.$('ul',list);
		console.log(ul);


	}
	Selector.prototype._content=function(){
		
	}


	window.$selector=Selector;

})(window,document)

怎么选取都选取不到，这是为什么啊啊啊

CC陈十一 2019-06-21

源自：项目：ES6实现图片切换特效 3-2 项目作业

收起

2回答

好帮手慕糖回答被采纳获得+3积分 2019-06-21 19:38:14

同学你好，把list这个方法的调用，放到bind之前就可以了哦。因为list这个是列表生成的方法。但是bing中有调用show这个方法，在调用的时候，列表还没生成，所以获取不到哦。

希望能帮助到你，欢迎采纳。

祝学习愉快！

收起回答

CC陈十一提问者 #1

好的，谢谢老师！

2019-06-21 19:40:38

好帮手慕糖 2019-06-21 17:54:08

同学你好，data.js中的内容是什么？这里缺少这个文件，无法进行测试哦。建议：可以粘贴下完整的代码哦。

祝学习愉快！

收起回答

提问者 CC陈十一 #1

const data=[{ type:'构建工具', value:'Babel', number:1 }, { type:'构建工具', value:'Webpack', number:2 }, { type:'构建工具', value:'Rollup', number:3 }, { type:'前端框架', value:'Vue', number:4 }, { type:'前端框架', value:'Angular', number:5 }, { type:'前端框架', value:'React', number:6 }, { type:'前端框架', value:'Nerv', number:7 }]

2019-06-21 18:02:19
提问者 CC陈十一 #2

使用自己定义的方法都无法获取ul和li，显示的都是null

2019-06-21 18:03:50