简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - js，有幾行程式碼不太懂？
女神的闺蜜爱上我
女神的闺蜜爱上我 2017-07-05 11:00:28
0
2
787
<!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.為什麼要邏輯運算？
2.this.index 與 op.style.cssText之間是怎麼樣的關係，能簡單說一下嗎？

女神的闺蜜爱上我
女神的闺蜜爱上我

全部回覆(2)
某草草
某草草2017-07-05 11:02:28 2樓

那句的意思是：如果點擊的按鈕是“重置”，則把 p1 元素的 cssText 清空。也就是重置了 p1 元素的初始狀態（沒有 style 值）。

&& 運算是從左向右執行的，只有當左邊表達式為真時，才執行右邊的表達式。這裡既當 this.index == oBtn.length - 1，也就是點擊的是最後一個按鈕時，執行 op.style.cssText = ""。

這種寫法不值得提倡，閱讀性很差，不是一個好的寫法。正常的寫法是：

if(this.index === oBtn.length - 1) {
  op.style.cssText = ""
}

this.index 就是保存了按鈕的序號，用來判斷點擊的是哪個按鈕。這裡不能直接用 i 來表示，這是 JavaScript 一個著名的缺陷。

點贊 +0
新增回覆
为情所困
为情所困2017-07-05 11:02:28 1樓 
this.index == oBtn.length - 1 && (op.style.cssText = "");

表示：如果是最後一個btn的話，就執行後面的程式碼(op.style.cssText = ""),即清除樣式

a==b&&code...

相當於if(a==b){code....}

個人不太喜歡這種寫法。

2.this.index 與 op.style.cssText之間是怎麼樣的關係

this.index 是按鈕的序號
op.style.cssText = ""表示清除op的樣式。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！