Cet article partage principalement avec vous la méthode de sélection de produits à l'aide du code js natif. Les connaissances utilisées sont : js basics, dom La première méthode utilise la méthode array en js, et la seconde méthode utilise json et for-in et. es6.
Étapes de mise en œuvre
1. Générer une structure HTML en fonction de la structure des données (en utilisant l'opération dom)
2. Obtenez chaque li et attribuez à chaque li un événement de liaison de balise. fonction de traitement
3. Cliquez sur la balise a, ajoutez le contenu de la balise a à l'objet et ajoutez le style en même temps
4. Générez des conditions de sélection basées sur les attributs stockés dans la structure HTML de l'objet (classé dans l'ordre)
5. Cliquez pour fermer la condition sélectionnée, supprimer les données, supprimer la structure HTML et supprimer le style dans son li correspondant
Le premier méthode
<script>
window.onload = function(){
var oType = document.getElementById('type');
var oChoose = document.getElementById('choose');
var oChosp = oChoose.getElementsByTagName('p')[0];
var crumbData = [
{
"title": "品牌",
"data": [ "苹果","小米","锤子","魅族","华为","三星","OPPO","vivo","乐视"]
},
{
"title": "尺寸",
"data": ["4.0-4.5英寸","4.6-4.9英寸","5.0-5.5英寸","6.0英寸以上"]
},
{
"title": "系统",
"data": ["android","ios","window phone","无","其他"]
},
{
"title": "网络",
"data": ["联通3G","双卡单4G","双卡双4G","联通4G"]
}
]
//利用dom动态添加元素
for(var i=0; i<crumbData.length; i++){
var aLi = document.createElement('li');
var aSpan = document.createElement('span');
aSpan.innerHTML = crumbData[i].title;
aLi.appendChild(aSpan);
for(var j = 0; j<crumbData[i].data.length; j++){
var aA = document.createElement('a');
aA.innerHTML = crumbData[i].data[j];
aLi.appendChild(aA);
}
oType.appendChild(aLi);
}
var aLi = oType.getElementsByTagName('li');
var arr = [];//用来存放筛选条件
for(var i = 0; i<aLi.length; i++){
arr.push(0);
}//先将数组中存放aLi.length个0，方便接下来按li的顺序存放数据
for(var i=0; i<aLi.length; i++){
aLi[i].prevNode = null;//记录点击的a标签
aLi[i].index = i;//记录每一个li的下标
var aA = aLi[i].getElementsByTagName('a');
for(var j=0; j<aA.length; j++){
aA[j].onclick = function(){
var parent = this.parentNode;//点击的a标签的父级li
//既要生成选择的结构，还要对选择的结构进行排序
//点击同一行筛选条件，只能有一个
if(parent.prevNode){
parent.prevNode.style.color = '';
}
this.style.color = 'red';
arr[parent.index] = this.innerText;
oChosp.innerHTML = '';
for(var i=0; i<arr.length; i++){
if(arr[i]){ //只有当arr[i]的值不为0时，也即与下标对应的第i个li中有被选中的时候才执行下面的代码
var oChomark = document.createElement('mark');
oChomark.innerHTML = arr[i];
var oCxa = document.createElement('a');
oCxa.innerHTML = 'X';
oCxa.setAttribute('name',i);//标记商品筛选区的a所在的li是第几个
oChomark.appendChild(oCxa);
oChosp.appendChild(oChomark);}
}
var num = 0;
var ChoseA = oChosp.getElementsByTagName('a');
for(var i = 0; i<ChoseA.length; i++){
ChoseA[i].index = i;
ChoseA[i].onclick = function(){
num = parseInt(this.getAttribute('name'));//得到删除a标签在第几个li中（记得将字符串格式转化为数字格式）
this.parentNode.remove();
aLi[num].prevNode.style.color = '';
arr[num]=0;//让删除的元素在数组中对应下标的值变为0
}
}
parent.prevNode = this;
}
}
}
}
</script>La deuxième méthode
obj[key1] = "苹果"
*/
// 筛选条件
var filterChoose = ["name","size","system","www"];
var filterObj = {}
for( var k = 0; k< lis.length; k++ ){
//得到每一个li中的所有的a标签
itemA = lis[k].querySelectorAll("a");
lis[k].prevNode = null; // 记录点击的a标签
lis[k].index = k; // 记录每一个li的下标
for( var m = 0; m < itemA.length; m++ ){
// 给每一个a标签绑定点击处理函数
itemA[m].onclick = function(){
var parent = this.parentNode; // 点击的a标签的父级 li
// 既要生成选择的结构，还要对选择的结构进行排序
// 点击同一行筛选条件，只能有一个
/*
{
key:
key2:
}
key值是唯一的
key值改怎定义？？？
*/
// 把每一个li的下标作为key值，把点击的a的内容作为值
chooseObj[parent.index] = this.innerText;
console.log(chooseObj)
// 生成筛选条件的结构
createChooseHtml();
// 存一下筛选的值
filterObj[filterChoose[parent.index]] = this.innerText.trim();
// 筛选出想要的数据
filterHandle()
// 去掉之前点击的a标签的color
if(parent.prevNode){
parent.prevNode.style.color = ''
}
this.style.color = 'red';
parent.prevNode = this; // 点击之后记录点击的这个元素
}
}
}
// 选择的容器
var chooseElement = document.querySelector("#choose p")
function createChooseHtml(){
// 对象是没有顺序
/*
chooseObj = {
1: "4.0"，
0:"苹果",
3:
2:
}
*/
var html = '';
for( var i = 0; i < lis.length; i++ ){
// i: 0 1 2 3
if( chooseObj[i] ){
// html += '<mark>'+chooseObj[i]+'<a href="javascript:;">x</a></mark>'
// 生成结构的时候在行间保存对象的key值
html += `<mark>${chooseObj[i]}<a data-index="${i}" href="javascript:;">x</a></mark>`
}
}
chooseElement.innerHTML = html;
// 获取到所有的元素
var chooseA = chooseElement.querySelectorAll("a");
for(var j = 0; j < chooseA.length; j++){
chooseA[j].onclick = function (){
// 移出当前点击a标签的父级
// this.parentNode.parentNode.removeChild(this.parentNode);
this.parentNode.remove();
// 删数据
delete chooseObj[this.dataset.index];
// 点击每一个li中的a标签存的属性
lis[this.dataset.index].prevNode.style.color = '';
console.log(chooseObj)
};
}
}
var shopList = document.querySelector(".shop-list")
//筛选数据
function filterHandle(){
var filterArr = shopsList; // 等于原始数组
for(var attr in filterObj){
// 做一个过滤
filterArr = filterArr.filter(function(obj){
console.log(attr)
return obj[attr] === filterObj[attr]
})
}
shopList.innerHTML = '<pre class="brush:php;toolbar:false">'+JSON.stringify(filterArr,null,3)+'';
}
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
