javascript - js，有幾行代碼不太明白？
問(wèn)題描述
<!Doctype html><html lang='en> <head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><title>控制p屬性</title><script> var changeStyle = function(elem, attr, value) {elem.style[attr] = value }; window.onload = function() {var oBtn = document.getElementsByTagName('input');var op = document.getElementById('p1');var oAtt = ['width', 'height', 'background', 'display', 'display'];var oVal = ['200px', '200px', 'red', 'none', 'block'];for (var i = 0; i < oBtn.length; i++) { oBtn[i].index = i; oBtn[i].onclick = function() {this.index == oBtn.length - 1 && (op.style.cssText = '');changeStyle(op, oAtt[this.index], oVal[this.index]) }} };</script> </head> <body><p id='outer'> <input type='button' value='變寬' /> <input type='button' value='變高' /> <input type='button' value='變色' /> <input type='button' value='隱藏' /> <input type='button' value='重置' /> <p id='p1'></p></p> </body></html>
1.為什么要邏輯運(yùn)算？2.this.index 與 op.style.cssText之間是怎么樣的關(guān)系，能簡(jiǎn)單說(shuō)一下嗎？
問(wèn)題解答
回答1：那句的意思是：如果點(diǎn)擊的按鈕是“重置”，則把 p1 元素的 cssText 清空。也就是重置了 p1 元素的初始狀態(tài)（沒(méi)有 style 值）。
&& 運(yùn)算是從左向右執(zhí)行的，只有當(dāng)左邊表達(dá)式為真時(shí)，才執(zhí)行右邊的表達(dá)式。在這里既當(dāng) this.index == oBtn.length - 1，也就是點(diǎn)擊的是最后一個(gè)按鈕時(shí)，執(zhí)行 op.style.cssText = ''。
這種寫法不值得提倡，閱讀性很差，不是一個(gè)好的寫法。正常的寫法是：
if(this.index === oBtn.length - 1) { op.style.cssText = ''}
this.index 就是保存了按鈕的序號(hào)，用于判斷點(diǎn)擊的是哪個(gè)按鈕。在這里不能直接用 i 來(lái)表示，這是 JavaScript 一個(gè)著名的缺陷。
回答2：this.index == oBtn.length - 1 && (op.style.cssText = '');
表示：如果是最后一個(gè)btn的話，就執(zhí)行后面的代碼(op.style.cssText = ''),即清除樣式
a==b&&code...
相當(dāng)于if(a==b){code....}
個(gè)人不太喜歡這種寫法。
2.this.index 與 op.style.cssText之間是怎么樣的關(guān)系
this.index 是按鈕的序號(hào)op.style.cssText = ''表示清除op的樣式。
相關(guān)文章：
1. javascript - js 寫類似商品管理后臺(tái)頁(yè) 用什么設(shè)計(jì)模式比較好擴(kuò)展和維護(hù)2. javascript - js輸入框限定字?jǐn)?shù)問(wèn)題3. javascript - js刪除頁(yè)面節(jié)點(diǎn)有何作用，直接刪除具體代碼不是一樣的效果么？4. javascript - JS 文件上傳問(wèn)題5. javascript - JS擴(kuò)展語(yǔ)句用法6. javascript - JS里面if else的循環(huán)問(wèn)題？7. javascript - js怎么實(shí)現(xiàn)jq的addclass,removeclass,例如本來(lái)是 class="aa",要變成class="aa bb"8. javascript - js 二維數(shù)組交叉取隨機(jī)數(shù)，如何實(shí)現(xiàn)取到的隨機(jī)數(shù)比較平均？9. javascript - js正則驗(yàn)證：最長(zhǎng)12個(gè)字，僅限中文、英文大小寫、數(shù)字、基本符號(hào)10. javascript - JS設(shè)置Video視頻對(duì)象的currentTime時(shí)出現(xiàn)了問(wèn)題,IE,Edge,火狐,都可以設(shè)置,反而chrom卻...
網(wǎng)公網(wǎng)安備