javascript - 新手js:操作其他相同的form跟第一个form一样-PHP中文网问答

picon跟on的样式一样，on是显示出来，picon是隐藏。

问题就是：我实现了第一个form的功能，js代码在最下边，但只是第一个，我想其他form也都是这种功能，尝试了事件代理，感觉还是无力，求教大神：）


    

        
            
            
                
                

                    
                    
                    

                         
Paul Smith 灰色格子西服三件套 18100.00RMB
                         
                            
                                 
尺码:
                                    
                                        M
                                        
                                    
                                    
                                        L
                                        
                                    
                                    
                                        XL
                                        
                                    
                                 
                            
                                  
                                 
数量: -
                                        
                                        +
                                 
                                 
                            
                         
                    
                
                
                    
三件套西装
                    三件套西装....
                
            
        
        
            
                

                    
                    

                         
RICHARD JAMES 蓝色羊毛西装外套 3760.00RMB
                         
                            
                                 
尺码:
                                    
                                        M
                                        
                                    
                                    
                                        L
                                        
                                    
                                    
                                        XL
                                        
                                    
                                 
                            
                                     
                                 
数量: -
                                        
                                        +
                                 
                                 
                            
                         
                    
                
                
                    
毛呢西装
                    毛呢西装....
                
            
        
        
            
                

                    
                    

                         
Hackett London镂空圆形短檐皮环草帽 464.25RMB
                         
                            
                                 
尺码:
                                    
                                        M
                                        
                                    
                                    
                                        L
                                        
                                    
                                    
                                        XL
                                        
                                    
                                 
                            
                                     
                                 
数量: -
                                        
                                        +
                                 
                                 
                            
                         
                    
                
                
                    
草帽
                    草帽...
                
            
        
        
            
                

                    
                    

                         
IMMY CHOO 皮靴 1809.74
                         
                            
                                 
尺码:
                                    
                                        41
                                        
                                    
                                    
                                        42
                                        
                                    
                                    
                                        43
                                        
                                    
                                 
                            
                                     
                                 
数量: -
                                        
                                        +
                                 
                                 
                            
                         
                    
                
                
                    
马靴
                    如今....

var num = document.getElementsByClassName('size')[0];
var picon1 = num.getElementsByTagName('img')[0];
var picon2 = num.getElementsByTagName('img')[1];
var picon3 = num.getElementsByTagName('img')[2];

var num1 = num.getElementsByClassName('num1')[0];
var num2 = num.getElementsByClassName('num2')[0];
var num3 = num.getElementsByClassName('num3')[0];

var count = document.getElementById('count');
var countNum = count.getElementsByTagName('input')[0];
var add = count.getElementsByClassName('add')[0];
var reduce = 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(){
    var value = parseInt(countNum.value);
    countNum.value = value + 1;
}
reduce.onclick = function(){
    if(countNum.value > 0){
        var value = parseInt(countNum.value);
        countNum.value = value - 1;
    }
}

var goodsEle = document.getElementById('goods') goodsEle.addEventListener('click', function(e) { var target = e.target if (target.nodeName.toUpperCase() === 'SPAN') { var inputEle = target.parentNode.getElementsByTagName('input')[0], value = parseInt(inputEle.value) value = target.className === 'add' ? value + 1 : value value = target.className === 'reduce' ? value -1 : value return inputEle.value = value } if (target.nodeName.toUpperCase() === 'IMG') { var aEle = target.parentNode, // 获取img的父节点，也就是a元素 pEle = aEle.parentNode, // a元素的父节点p元素 imgList = pEle.getElementsByTagName('img') // p元素下面的所有个img元素 for (var i = 0, ii = imgList.length; i < ii; i++) { imgList[i].className = 'picon' } return target.className = 'picon_on' } })

===大概是这样的==== $('p.size').delegate("a.size_num","click",function(){ if($(this).hasClass("num1")){ picon2.className = "picon_on"; picon1.className = "picon"; picon3.className = "picon"; }else if($(this).hasClass("num2")){ picon2.className = "picon_on"; picon1.className = "picon"; picon3.className = "picon"; }else if($(this).hasClass("num3")){ picon3.className = "picon_on"; picon2.className = "picon"; picon1.className = "picon"; } }); $('p.count').delegate("span.add","click",function(){ var value = parseInt(countNum.value); countNum.value = value + 1; }); $('p.count').delegate("span.reduce","click",function(){ if(countNum.value > 0){ var value = parseInt(countNum.value); countNum.value = value - 1; } });