                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /人人網(wǎng)評(píng)論功能

為什么el.innerHTML能直接獲取到"贊"？

<!DOCTYPE html>

<html>

<head>

? ? <title>21 Dece</title>

? ? <meta charset="utf-8">

? ? <style type="text/css">

? ? ? ? body { font-size: 12px; line-height: 120%; text-align: center; color:#333; padding: 20px;}

? ? ? ? li { list-style: none}

? ? ? ? a { color: #333; text-decoration: none;}

? ? ? ? a:hover { text-decoration: underline;}

? ? ? ? * { margin: 0; padding: 0; border: none;}

? ? ? ? .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden}

? ? ? ? .clearfix { *height:1%;}

? ? ? ? #list { margin: 0 auto; text-align: left; width: 540px;}

? ? ? ? .box { border-top: 1px solid #eee; position: relative; ?width: 540px; padding: 20px 0}

? ? ? ? .box:hover .close { display: block;}

? ? ? ? .close { display: none; top:0px; right: 0px; width: 28px; height: 28px; border: 1px solid #eee; position: absolute; background: #f2f4f7; line-height: 27px; text-align: center;}

? ? ? ? .close:hover { background: #c8d2e2; text-decoration: none;}

? ? ? ? .head { float: left; width: 60px; height: 60px; margin-right: 10px;}

? ? ? ? .content { float: left; width: 440px;}

? ? ? ? .main { margin-bottom: 10px;}

? ? ? ? .txt { margin-bottom: 10px;}

? ? ? ? .user { color: #369; }

? ? ? ? .pic { margin-right: 5px; width: 200px; border: 1px solid #eee;}

? ? ? ? .info { height: 20px; line-height: 19px; font-size: 12px; margin: 0 0 10px 0;}

? ? ? ? .info .time { color: #ccc; float: left; height: 20px; padding-left: 20px; background: url("images/bg1.jpg") no-repeat left top;}

? ? ? ? .info .praise { color: #369; float: right; height: 20px; padding-left: 18px; background: url("images/bg2.jpg") no-repeat left top;}

? ? ? ? .info .praise:hover { text-decoration: underline; background: url("images/bg3.jpg") no-repeat left top;}

? ? ? ? .praises-total { margin: 0 0 10px 0; height: 20px; background: url("images/praise.png") no-repeat 5px 5px rgb(247, 247, 247); padding: 5px 0 5px 25px; line-height: 19px;}

? ? ? ? .comment-box { padding: 10px 0; border-top: 1px solid #eee;}

? ? ? ? .comment-box:hover { background: rgb(247, 247, 247);}

? ? ? ? .comment-box .myhead { float: left; width: 30px; height: 30px; margin-right: 10px;}

? ? ? ? .comment-box .comment-content { float: left; width: 400px; }

? ? ? ? .comment-box .comment-content .comment-time { color: #ccc; margin-top: 3px; line-height: 16px; position: relative;}

? ? ? ? .comment-box .comment-content .comment-praise { display: none; color: #369; padding-left: 17px; height: 20px; background: url("images/praise.png") no-repeat; ?position: absolute; bottom: 0px; right: 44px;}

? ? ? ? .comment-box .comment-content .comment-operate { display: none; color: #369; height: 20px; ?position: absolute; bottom: 0px; right: 10px;}

? ? ? ? .comment-box .comment-content:hover .comment-praise { display: inline-block;}

? ? ? ? .comment-box .comment-content:hover .comment-operate { display: inline-block;}

? ? ? ? .text-box .comment { border: 1px solid #eee; display: block; height: 15px; width: 428px; padding: 5px; resize: none; color: #ccc}

? ? ? ? .text-box .btn { font-size: 12px; font-weight: bold; display: none; float: right; width: 65px; height: 25px; border: 1px solid #0C528D; color: #fff; background: #4679AC;}

? ? ? ? .text-box .btn-off { border: 1px solid #ccc; color: #ccc; background: #F7F7F7;}

? ? ? ? .text-box .word{ display: none; float: right; margin: 7px 10px 0 0; color: #666;}

? ? ? ? .text-box-on .comment{ height: 50px; color: #333;}

? ? ? ? .text-box-on .btn{ display: inline;}

? ? ? ? .text-box-on .word{ display: inline;}

? ? </style>

? ? <script type="text/javascript">

? ? ? ? window.onload= function () {

? ? ? ? ? ? var list = document.getElementById('list');

? ? ? ? ? ? var lis = list.children;

? ? ? ? ? ? var timer;

? ? ? ? ? ? //定義刪除節(jié)點(diǎn)函數(shù)

? ? ? ? ? ? // A.5.2.點(diǎn)擊關(guān)閉按鈕則觸發(fā)函數(shù)removeNode.獲取節(jié)點(diǎn)的父節(jié)點(diǎn)再刪除節(jié)點(diǎn)本身

? ? ? ? ? ? function removeNode(node){

? ? ? ? ? ? ? ? node.parentNode.removeChild(node);

? ? ? ? ? ? } ?

? ? ? ? ? ? // B.3.贊分享

? ? ? ? ? ? // box即整個(gè)li

? ? ? ? ? ? function praiseBox(box,el){

? ? ? ? ? ? ? ? // 在整個(gè)li中獲取當(dāng)前總贊praises-total

? ? ? ? ? ? ? ? var praiseElement = box.getElementsByClassName("praises-total")[0];

? ? ? ? ? ? ? ? // B.3.1.praises-total中已有的點(diǎn)贊數(shù)

? ? ? ? ? ? ? ? var oldTotal = parseInt(praiseElement.getAttribute("total"));

? ? ? ? ? ? ? ? // B.3.2.在

? ? ? ? ? ? ? ? var txt = el.innerHTML;

? ? ? ? ? ? ? ? document.write(txt); ? //為什么直接彈出“贊” 而不是其他的文本？

? ? ? ? ? ? }

? ? ? ? ? ? // A.1.循環(huán)遍歷每個(gè)li,并添加onclick事件

? ? ? ? ? ? for(var i = 0; i<lis.length; i++){

? ? ? ? ? ? ? ? lis[i].onclick = function(e){

? ? ? ? ? ? ? ? ? ? // A.2.兼容ie下也能獲取事件對(duì)象

? ? ? ? ? ? ? ? ? ? e = e || window.event;

? ? ? ? ? ? ? ? ? ? // A.3.用一個(gè)變量來(lái)存儲(chǔ)觸發(fā)元素

? ? ? ? ? ? ? ? ? ? var el = e.srcElement;

? ? ? ? ? ? ? ? ? ? //alert(el);此時(shí)的a的srcElement是href中的javascript:;

? ? ? ? ? ? ? ? ? ? // A.4.獲取a標(biāo)簽,判斷類名

? ? ? ? ? ? ? ? ? ? switch(el.className){

? ? ? ? ? ? ? ? ? ? ? ? case "close":

? ? ? ? ? ? ? ? ? ? ? ? // A.5.1.如果關(guān)閉鈕被點(diǎn)擊則觸發(fā)刪除節(jié)點(diǎn)函數(shù)

? ? ? ? ? ? ? ? ? ? ? ? removeNode(el.parentNode);

? ? ? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? ? ? ? ? // B.1.贊分享.如果a的類名是praise

? ? ? ? ? ? ? ? ? ? ? ? case "praise":

? ? ? ? ? ? ? ? ? ? ? ? // B.2.通過(guò)a(點(diǎn)贊)獲取當(dāng)前整個(gè)li

? ? ? ? ? ? ? ? ? ? ? ? praiseBox(el.parentNode.parentNode.parentNode,el);

? ? ? ? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

?

? ? ? ? ? ?

? ? ? ? }

? ? </script>

</head>

<body>

? ? <li class="box clearfix">

? ? ? ? <a class="close" href="javascript:;">×</a>

? ? ? ? <img class="head" src="http://img1.sycdn.imooc.com//536b4ad10001c94f00620060.jpg" alt=""/>

? ? ? ? <div class="content">

? ? ? ? ? ? <div class="main">

? ? ? ? ? ? ? ? <p class="txt">

? ? ? ? ? ? ? ? ? ? <span class="user">Andy：</span>輕輕的我走了，正如我輕輕的來(lái)；我輕輕的招手，作別西天的云彩。

? ? ? ? ? ? ? ? </p>

? ? ? ? ? ? ? ? <img class="pic" src="http://img1.sycdn.imooc.com//536b4aec0001a70f01960228.jpg" alt=""/>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="info clearfix">

? ? ? ? ? ? ? ? <span class="time">02-14 23:01</span>

? ? ? ? ? ? ? ? <a class="praise" href="javascript:;">贊</a>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="praises-total" total="4" style="display: block;">4個(gè)人覺(jué)得很贊</div>

? ? ? ? ? ? <ul class="comment-list">

? ? ? ? ? ? ? ? <li class="comment-box clearfix" user="self">

? ? ? ? ? ? ? ? ? ? <img class="myhead" src="http://img1.sycdn.imooc.com//536b4b050001b06c00310030.jpg" alt=""/>

? ? ? ? ? ? ? ? ? ? <div class="comment-content">

? ? ? ? ? ? ? ? ? ? ? ? <p class="comment-text"><span class="user">我：</span>寫的太好了。</p>

? ? ? ? ? ? ? ? ? ? ? ? <p class="comment-time">

? ? ? ? ? ? ? ? ? ? ? ? ? ? 2014-02-19 14:36

? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1 贊</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="javascript:;" class="comment-operate">刪除</a>

? ? ? ? ? ? ? ? ? ? ? ? </p>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? </ul>

? ? ? ? ? ? <div class="text-box">

? ? ? ? ? ? ? ? <textarea class="comment" autocomplete="off">評(píng)論…</textarea>

? ? ? ? ? ? ? ? <button class="btn ">回復(fù)</button>

? ? ? ? ? ? ? ? <span class="word"><span class="length">0</span>/140</span>

? ? ? ? ? ? </div>

? ? ? ? </div>

? ? </li>

? ? <li class="box clearfix">

? ? ? ? <a class="close" href="javascript:;">×</a>

? ? ? ? <img class="head" src="http://img1.sycdn.imooc.com//536b4ad10001c94f00620060.jpg" alt=""/>

? ? ? ? <div class="content">

? ? ? ? ? ? <div class="main">

? ? ? ? ? ? ? ? <p class="txt">

? ? ? ? ? ? ? ? ? ? <span class="user">人在旅途：</span>三亞的海灘很漂亮。

? ? ? ? ? ? ? ? </p>

? ? ? ? ? ? ? ? <img class="pic" src="http://img1.sycdn.imooc.com//536b4aec0001a70f01960228.jpg" alt=""/>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="info clearfix">

? ? ? ? ? ? ? ? <span class="time">02-14 23:01</span>

? ? ? ? ? ? ? ? <a class="praise" href="javascript:;">贊</a>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="praises-total" total="0" style="display: none;"></div>

? ? ? ? ? ? <ul class="comment-list">

? ? ? ? ? ? ? ? <li class="comment-box clearfix" user="other">

? ? ? ? ? ? ? ? ? ? <img class="myhead" src="http://img1.sycdn.imooc.com//536b4b050001b06c00310030.jpg" alt=""/>

? ? ? ? ? ? ? ? ? ? <div class="comment-content">

? ? ? ? ? ? ? ? ? ? ? ? <p class="comment-text"><span class="user">老鷹：</span>我也想去三亞。</p>

? ? ? ? ? ? ? ? ? ? ? ? <p class="comment-time">

? ? ? ? ? ? ? ? ? ? ? ? ? ? 2014-02-19 14:36

? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="javascript:;" class="comment-praise" total="0" my="0">贊</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="javascript:;" class="comment-operate">回復(fù)</a>

? ? ? ? ? ? ? ? ? ? ? ? </p>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? </ul>

? ? ? ? ? ? <div class="text-box">

? ? ? ? ? ? ? ? <textarea class="comment" autocomplete="off">評(píng)論…</textarea>

? ? ? ? ? ? ? ? <button class="btn ">回復(fù)</button>

? ? ? ? ? ? ? ? <span class="word"><span class="length">0</span>/140</span>

? ? ? ? ? ? </div>

? ? ? ? </div>

? ? </li>

? ? <li class="box clearfix">

? ? ? ? <a class="close" href="javascript:;">×</a>

? ? ? ? <img class="head" src="http://img1.sycdn.imooc.com//536b4ad10001c94f00620060.jpg" alt=""/>

? ? ? ? <div class="content">

? ? ? ? ? ? <div class="main">

? ? ? ? ? ? ? ? <p class="txt">

? ? ? ? ? ? ? ? ? ? <span class="user">小Y：</span>英國(guó)藝術(shù)家 Jane Perkins 能利用很多不起眼的東西進(jìn)行創(chuàng)作，甚至是垃圾。首飾、紐扣、玩具等等都可以作為他創(chuàng)作的工具并創(chuàng)作出惟妙惟肖的畫作，絲毫不遜色于色彩豐富的顏料。

? ? ? ? ? ? ? ? </p>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="info clearfix">

? ? ? ? ? ? ? ? <span class="time">02-11 13:17</span>

? ? ? ? ? ? ? ? <a class="praise" href="javascript:;">贊</a>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="praises-total" total="0" style="display: none;"></div>

? ? ? ? ? ? <ul class="comment-list">

? ? ? ? ? ? </ul>

? ? ? ? ? ? <div class="text-box">

? ? ? ? ? ? ? ? <textarea class="comment" autocomplete="off">評(píng)論…</textarea>

? ? ? ? ? ? ? ? <button class="btn ">回復(fù)</button>