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

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

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

<p class="goods">
    <ul>
        <li class="good">
            <!--商品模块-->
            <p class="pic">
                <!--商品图片-->
                <p class="det">
                    <img class="img" src="images/lai/2.1.jpg" />
                    <!--商品信息-->
                    <p class="info" id="info">
                         <h4 style="text-align:center; margin:15px 0; color:#333;">Paul Smith 灰色格子西服三件套 18100.00RMB</h4>
                         <form class="form">
                           <p class="size" id="size"> 
                                 <p>尺码:
                                    <a class="size_num num1" href="javaScript:;">
                                        M
                                        <img class="picon" src="images/picon.gif" />
                                    </a>
                                    <a class="size_num num2" href="javaScript:;">
                                        L
                                        <img class="picon" src="images/picon.gif" />
                                    </a>
                                    <a class="size_num num3" href="javaScript:;">
                                        XL
                                        <img class="picon" src="images/picon.gif" />
                                    </a>
                                 </p>
                            </p>
                            <p class="count" id="count">      
                                 <p>数量: <span class="reduce">-</span>
                                        <input class="count-input" type="text" value="1"/>
                                        <span class="add">+</span>
                                 </p>
                                 <input name="submit" value="加入购物车" class="collect" type="submit" />
                            </p>
                         </form>
                    </p>
                </p>
                <p class="mes">
                    <h3 style="color:#C03; font-size:16px; margin:20px 0;">三件套西装</h3>
                    <p class="txt">三件套西装....</p>
                </p>
            </p>
        </li>
        <li class="good">
            <p class="pic">
                <p class="det">
                    <img class="img" src="images/lai/10.1.jpg" />
                    <p class="info">
                         <h4 style="text-align:center; margin:15px 0; color:#333;">RICHARD JAMES 蓝色羊毛西装外套 3760.00RMB</h4>
                         <form class="form">
                           <p class="size"> 
                                 <p>尺码:
                                    <a class="size_num num1" href="javaScript:;">
                                        M
                                        <img class="picon" src="images/picon.gif" />
                                    </a>
                                    <a class="size_num num2" href="javaScript:;">
                                        L
                                        <img class="picon" src="images/picon.gif" />
                                    </a>
                                    <a class="size_num num3" href="javaScript:;">
                                        XL
                                        <img class="picon" src="images/picon.gif" />
                                    </a>
                                 </p>
                            </p>
                            <p class="count">         
                                 <p>数量: <span class="reduce">-</span>
                                        <input class="count-input" type="text" value="1"/>
                                        <span class="add">+</span>
                                 </p>
                                 <input name="submit" value="加入购物车" class="collect" type="submit" />
                            </p>
                         </form>
                    </p>
                </p>
                <p class="mes">
                    <h3 style="color:#C03; font-size:16px; margin:20px 0;">毛呢西装</h3>
                    <p class="txt">毛呢西装....</p>
                </p>
            </p>
        </li>
        <li class="good">
            <p class="pic">
                <p class="det">
                    <img class="img" src="images/lai/12.1.jpg" />
                    <p class="info" id="info">
                         <h4 style="text-align:center; margin:15px 0; color:#333;">Hackett London镂空圆形短檐皮环草帽 464.25RMB</h4>
                         <form class="form">
                           <p class="size"> 
                                 <p>尺码:
                                    <a class="size_num num1" href="javaScript:;">
                                        M
                                        <img class="picon" src="images/picon.gif" />
                                    </a>
                                    <a class="size_num num2" href="javaScript:;">
                                        L
                                        <img class="picon" src="images/picon.gif" />
                                    </a>
                                    <a class="size_num num3" href="javaScript:;">
                                        XL
                                        <img class="picon" src="images/picon.gif" />
                                    </a>
                                 </p>
                            </p>
                            <p class="count">         
                                 <p>数量: <span class="reduce">-</span>
                                        <input class="count-input" type="text" value="1"/>
                                        <span class="add">+</span>
                                 </p>
                                 <input name="submit" value="加入购物车" class="collect" type="submit" />
                            </p>
                         </form>
                    </p>
                </p>
                <p class="mes">
                    <h3 style="color:#C03; font-size:16px; margin:20px 0;">草帽</h3>
                    <p class="txt">草帽...</p>
                </p>
            </p>
        </li>
        <li class="good">
            <p class="pic">
                <p class="det">
                    <img class="img" src="images/lai/14.1.jpg" />
                    <p class="info" id="info">
                         <h4 style="text-align:center; margin:15px 0; color:#333;">IMMY CHOO 皮靴 1809.74</h4>
                         <form class="form">
                           <p class="size"> 
                                 <p>尺码:
                                    <a class="size_num num1" href="javaScript:;">
                                        41
                                        <img class="picon" src="images/picon.gif" />
                                    </a>
                                    <a class="size_num num2" href="javaScript:;">
                                        42
                                        <img class="picon" src="images/picon.gif" />
                                    </a>
                                    <a class="size_num num3" href="javaScript:;">
                                        43
                                        <img class="picon" src="images/picon.gif" />
                                    </a>
                                 </p>
                            </p>
                            <p class="count">         
                                 <p>数量: <span class="reduce">-</span>
                                        <input class="count-input" type="text" value="1"/>
                                        <span class="add">+</span>
                                 </p>
                                 <input name="submit" value="加入购物车" class="collect" type="submit" />
                            </p>
                         </form>
                    </p>
                </p>
                <p class="mes">
                    <h3 style="color:#C03; font-size:16px; margin:20px 0;">马靴</h3>
                    <p class="txt">如今....</p>
                </p>
            </p>
        </li>
   </ul>
</p>

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; } });