国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - 新手js:操作其他相同的form跟第一個(gè)form一樣
天蓬老師
天蓬老師 2017-04-10 15:06:48
0
2
383

picon跟on的樣式一樣，on是顯示出來，picon是隱藏。

問題就是：我實(shí)現(xiàn)了第一個(gè)form的功能，js代碼在最下邊，但只是第一個(gè)，我想其他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>數(shù)量: <span class="reduce">-</span>
                                        <input class="count-input" type="text" value="1"/>
                                        <span class="add">+</span>
                                 </p>
                                 <input name="submit" value="加入購(gòu)物車" 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 藍(lán)色羊毛西裝外套 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>數(shù)量: <span class="reduce">-</span>
                                        <input class="count-input" type="text" value="1"/>
                                        <span class="add">+</span>
                                 </p>
                                 <input name="submit" value="加入購(gòu)物車" 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鏤空?qǐng)A形短檐皮環(huán)草帽 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>數(shù)量: <span class="reduce">-</span>
                                        <input class="count-input" type="text" value="1"/>
                                        <span class="add">+</span>
                                 </p>
                                 <input name="submit" value="加入購(gòu)物車" 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>數(shù)量: <span class="reduce">-</span>
                                        <input class="count-input" type="text" value="1"/>
                                        <span class="add">+</span>
                                 </p>
                                 <input name="submit" value="加入購(gòu)物車" 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;
    }
}
天蓬老師
天蓬老師

歡迎選擇我的課程，讓我們一起見證您的進(jìn)步~~

reply all(2)
伊謝爾倫

題主，你好。建議了解下DOM節(jié)點(diǎn)的相關(guān)知識(shí)，可能會(huì)對(duì)你有幫助噢^-^

為了方便獲取最外層的goods節(jié)點(diǎn)對(duì)象，我給它加了個(gè)id：

<p 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的父節(jié)點(diǎn)，也就是a元素
            pEle = aEle.parentNode, // a元素的父節(jié)點(diǎn)p元素
            imgList = pEle.getElementsByTagName('img') // p元素下面的所有個(gè)img元素

        for (var i = 0, ii = imgList.length; i < ii; i++) {
            imgList[i].className = 'picon'
        }

        return target.className = 'picon_on'
    }
})

Over~

伊謝爾倫 
===大概是這樣的====
$('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;
    }
});
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template