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

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

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

<div class="goods">
    <ul>
        <li class="good">
            <!--商品模块-->
            <div class="pic">
                <!--商品图片-->
                <div class="det">
                    <img class="img" src="images/lai/2.1.jpg" />
                    <!--商品信息-->
                    <div class="info" id="info">
                         <h4 style="text-align:center; margin:15px 0; color:#333;">Paul Smith 灰色格子西服三件套 18100.00RMB</h4>
                         <form class="form">
                           <div 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>
                            </div>
                            <div 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" />
                            </div>
                         </form>
                    </div>
                </div>
                <div class="mes">
                    <h3 style="color:#C03; font-size:16px; margin:20px 0;">三件套西装</h3>
                    <p class="txt">三件套西装....</p>
                </div>
            </div>
        </li>
        <li class="good">
            <div class="pic">
                <div class="det">
                    <img class="img" src="images/lai/10.1.jpg" />
                    <div class="info">
                         <h4 style="text-align:center; margin:15px 0; color:#333;">RICHARD JAMES 蓝色羊毛西装外套 3760.00RMB</h4>
                         <form class="form">
                           <div 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>
                            </div>
                            <div 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" />
                            </div>
                         </form>
                    </div>
                </div>
                <div class="mes">
                    <h3 style="color:#C03; font-size:16px; margin:20px 0;">毛呢西装</h3>
                    <p class="txt">毛呢西装....</p>
                </div>
            </div>
        </li>
        <li class="good">
            <div class="pic">
                <div class="det">
                    <img class="img" src="images/lai/12.1.jpg" />
                    <div class="info" id="info">
                         <h4 style="text-align:center; margin:15px 0; color:#333;">Hackett London镂空圆形短檐皮环草帽 464.25RMB</h4>
                         <form class="form">
                           <div 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>
                            </div>
                            <div 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" />
                            </div>
                         </form>
                    </div>
                </div>
                <div class="mes">
                    <h3 style="color:#C03; font-size:16px; margin:20px 0;">草帽</h3>
                    <p class="txt">草帽...</p>
                </div>
            </div>
        </li>
        <li class="good">
            <div class="pic">
                <div class="det">
                    <img class="img" src="images/lai/14.1.jpg" />
                    <div class="info" id="info">
                         <h4 style="text-align:center; margin:15px 0; color:#333;">IMMY CHOO 皮靴 1809.74</h4>
                         <form class="form">
                           <div 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>
                            </div>
                            <div 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" />
                            </div>
                         </form>
                    </div>
                </div>
                <div class="mes">
                    <h3 style="color:#C03; font-size:16px; margin:20px 0;">马靴</h3>
                    <p class="txt">如今....</p>
                </div>
            </div>
        </li>
   </ul>
</div>

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

---

===大概是这样的====
$('div.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";
       }

});
$('div.count').delegate("span.add","click",function(){
    var value = parseInt(countNum.value);
    countNum.value = value + 1;
});

$('div.count').delegate("span.reduce","click",function(){
   if(countNum.value > 0){
        var value = parseInt(countNum.value);
        countNum.value = value - 1;
    }
});

---

题主，你好。建议了解下DOM节点的相关知识，可能会对你有帮助噢^-^

为了方便获取最外层的goods节点对象，我给它加了个id：

<div class="goods" id="goods">

绑定事件代码：

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

Over~