新手js:操作其他相同的form跟第一个form一样

Question

picon跟on的样式一样，on是显示出来，picon是隐藏。问题就是：我实现了第一个form的功能，js代码在最下边，但只是第一个，我想其他form也都是这种功能，尝试了事件代理，感觉还是无力，求教大神：）PaulSmith灰色格子西服三件套18100.00RMB尺码:MLXL数量:-+三件套西装三件套西装....RICHARDJAMES蓝色羊毛西装外套3760.00RMB尺码:MLXL数量:-+毛呢西装毛呢西装....HackettLondon镂空圆形短檐皮环草帽464.25RMB尺码:MLXL数量:-+草帽草帽...IMMYCHOO皮靴1809.74尺码:414243数量:-+马靴如今....varnum=document.getElementsByClassName('size')[0];varpicon1=num.getElementsByTagName('img')[0];varpicon2=num.getElementsByTagName('img')[1];varpicon3=num.getElementsByTagName('img')[2];varnum1=num.getElementsByClassName('num1')[0];varnum2=num.getElementsByClassName('num2')[0];varnum3=num.getElementsByClassName('num3')[0];varcount=document.getElementById('count');varcountNum=count.getElementsByTagName('input')[0];varadd=count.getElementsByClassName('add')[0];varreduce=count.getElementsByClassName('reduce')[0];num1.onclick=function(){picon1.className="picon_on";picon2.className="picon";picon3.className="picon";}num2.onclick=function(){picon2.className="picon_on";picon1.className="picon";picon3.className="picon";}num3.onclick=function(){picon3.className="picon_on";picon2.className="picon";picon1.className="picon";}add.onclick=function(){varvalue=parseInt(countNum.value);countNum.value=value+1;}reduce.onclick=function(){if(countNum.value>0){varvalue=parseInt(countNum.value);countNum.value=value-1;}}

Answer 1

题主，你好。建议了解下DOM节点的相关知识，可能会对你有帮助噢^-^
为了方便获取最外层的goods节点对象，我给它加了个id：
绑定事件代码：
vargoodsEle=document.getElementById('goods')
goodsEle.addEventListener('click',function(e){
vartarget=e.target
if(target.nodeName.toUpperCase()==='SPAN'){
varinputEle=target.parentNode.getElementsByTagName('input')[0],
value=parseInt(inputEle.value)
value=target.className==='add'?value+1:value
value=target.className==='reduce'?value-1:value
returninputEle.value=value
}
if(target.nodeName.toUpperCase()==='IMG'){
varaEle=target.parentNode,//获取img的父节点，也就是a元素
pEle=aEle.parentNode,//a元素的父节点p元素
imgList=pEle.getElementsByTagName('img')//p元素下面的所有个img元素
for(vari=0,ii=imgList.length;iimgList[i].className='picon'
}
returntarget.className='picon_on'
}
})
Over~